select下拉框默认不能选择第一个选项的问题

      如题，现在有个js的功能：用户选择下拉框的同时，把选择的下拉框显示出来。同时选择的不能有重复的。刚开始 使用的是 select的onchange事件：

     

1 $("#liveType").on("change",function(){
2     $("#selectedLiveType").append("<p><span class=\'close\'>X</span><button value=\'"+$(\'#liveType option:selected\').val()+"\' name=\'selectLiveType\'  onclick=\'removeLiveType(this)\'  style=\'background-color:white\'>"+$(\'#liveType option:selected\').text()+"</button></p>")
3 
4 })

 

  然而这种情况下，当选择第一个的时候 ，总是没有任何的反应。于是google:得到下面的方法

 

  

Element.prototype.onSelectChange = function(callback) {
	var cached = 0;
	this.addEventListener("click", function(event) {
		if (cached == this) {
			callback.call(this, event);
			cached = 0;
		} else {
			cached = this;
		}
	});
}

var select = document.getElementById("liveType");
select.onSelectChange(function(event) {
	var liveTypes=new Array();
	$("button[name=\'selectLiveType\']").each(function () {
		liveTypes.push($(this).val());
	})
	var checkArray = liveTypes.join(\',\');
	if(checkArray.indexOf($(\'#liveType option:selected\').val()) == -1){
		$("#selectedLiveType").append("<p><span class=\'close\'>X</span><button value=\'"+$(\'#liveType option:selected\').val()+"\' name=\'selectLiveType\'  onclick=\'removeLiveType(this)\'  style=\'background-color:white\'>"+$(\'#liveType option:selected\').text()+"</button></p>")
	}

});

　　

   通过 定义一个 数组checkArray， 使用indexOf进行判断有没有重复的。ok...