easyUI下拉列表点击事件使用方法

本文实例为大家分享了使用easyUI下拉列表点击事件的方法，供大家参考，具体内容如下可以

本文实例为大家分享了使用easyUI下拉列表点击事件的方法，供大家参考，具体内容如下

可以通过input 和select来创建下拉列表

其中select的创建如下：

通过json来创建js数组

[{ 
 "id":1, 
 "text":"text1" 
},{ 
 "id":2, 
 "text":"text2" 
},{ 
 "id":3, 
 "text":"text3", 
 "selected":true 
},{ 
 "id":4, 
 "text":"text4" 
},{ 
 "id":5, 
 "text":"text5" 
}]

例子：

html代码片段：

<select id="in_edit_netlink" style="width:160px;" class="easyui-combobox" data-options="valueField:'id',textField:'text',editable:false" >
</select>

js代码片段：

var ljfsArray = new Array();
 var objHTTP = new Object();
 objHTTP.text = "HTTP";
 var objTCP = new Object();
 objTCP.text = "TCP";
 objTCP.id = 1;
 objHTTP.id = 2;
 if (data.ljfs == "HTTP") {
 objHTTP.selected=true;
 } else {
 objTCP.selected=true;
 }
 ljfsArray.push(objHTTP);
 ljfsArray.push(objTCP);
 $('#in_edit_netlink').combobox('loadData', ljfsArray);

页面效果显示：

属性解释：

valueField:'id'---objTCP.id--->选项值value textField:'text'---objTCP.text--->页面显示值 objTCP.selected=true; --->默认显示

点击修改事件　　　　

onSelect　等同于   onChange 但是麻烦的是：easyUI中不支持onChange,在html中不支持onSelect。 onSelect必须在js代码中使用：

$("#in_edit_netlink").combobox({
 onSelect: function () {
 connectionType = $('#in_edit_netlink').val();
 if (connectionType == 1) {
 $('#in_edit_sjjh').textbox('setValue', tcpIp);
 } else {
 $('#in_edit_sjjh').textbox('setValue', httpIp);
 }
 }
 })

使用

$(function () {
 
})

默认加载后，onSelect事件就可以正常使用了。

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。