EasyUI--combobox
用EasyUI框架後Select中的一些方法和不用框架時不一樣，總結如下。
<body>
<!-- 框架的select標籤 -->
<select id="year" class="easyui-combobox" name="dept" style="width:200px;">
</select>
<input type="button" onclick="getSelectOption1();">確認</input>
<!-- 非框架的select標籤 -->
<select id="select2" style="width:200px;" onchange="getSelectItemByOnChange(this.value,this.selectedIndex,this.options[this.selectedIndex].text)">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
</select>
<input type="button" onclick="getSelectOption2();">確認</input>
</body>
<script type="text/javascript">
$(document).ready(function(){
var yearOption='<option></option>';
yearOption=yearOption+'<option>'+2015+'</option>'+'<option>'+2016+'</option>'+"<option selected='selected'>"+2017+'</option>'+'<option>'+2018+'</option>'+'<option>'+2019+'</option>';
$("#year").html(yearOption);
$('#year').combobox({
onChange:function(newValue,oldValue){
alert(newValue+oldValue );//彈窗顯示新資料和舊資料
}
});
});
//獲取選擇框中的值
function getSelectOption1(){
alert($("#year").val()+$("#year").text());//彈窗顯示 2015 2015201620172018，即被選擇了專案的標籤《》《》中間的值，和可選擇的專案《》《》中間的值
alert($('#year option:selected').text());//顯示被選擇專案的《》《》中的值
alert($('#year option:selected').val());//顯示被選擇專案的value值
}
//選擇下拉框的值後自動執行，彈窗顯示選擇框的資訊
function getSelectItemByOnChange(val,index,text){
alert('value:'+val+'index:'+index+' '+'text:'+text);//彈窗顯示value：1 index：0 text：a，即被選擇的專案的相關資訊
}
//非框架
function getSelectOption2(){
alert('value:'+$("#select2").val()+"text:"+$("#select2").text());//彈窗顯示value:2 text a b c d,即該select下所有的可選項
alert('value:'+$('#select2 option:selected').val()+" "+'text:'+$('#select2 option:selected').text());//彈窗顯示 value:2 text:b,即被選擇的專案的value和text值
alert(document.getElementById("select2").selectedIndex);//彈窗顯示被選擇的下拉框序號
//alert($("#select2").selectedIndex);//顯示undefined,Jquery沒有selectedIndex這個屬性
}
</script>