可以通过input 和select来创建下拉列表
其中select的创建如下:
通过json来创建js数组
1 [{ 2 "id":1, 3 "text":"text1" 4 },{ 5 "id":2, 6 "text":"text2" 7 },{ 8 "id":3, 9 "text":"text3", 10 "selected":true 11 },{ 12 "id":4, 13 "text":"text4" 14 },{ 15 "id":5, 16 "text":"text5" 17 }]
例子:
html代码片段:
1 <select id="in_edit_netlink" style="160px;" class="easyui-combobox" data-options="valueField:'id',textField:'text',editable:false" >
</select>
js代码片段:
1 var ljfsArray = new Array(); 2 var objHTTP = new Object(); 3 objHTTP.text = "HTTP"; 4 var objTCP = new Object(); 5 objTCP.text = "TCP"; 6 objTCP.id = 1; 7 objHTTP.id = 2; 8 if (data.ljfs == "HTTP") { 9 objHTTP.selected=true; 10 } else { 11 objTCP.selected=true; 12 } 13 ljfsArray.push(objHTTP); 14 ljfsArray.push(objTCP); 15 $('#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代码中使用:
1 $("#in_edit_netlink").combobox({ 2 onSelect: function () { 3 connectionType = $('#in_edit_netlink').val(); 4 if (connectionType == 1) { 5 $('#in_edit_sjjh').textbox('setValue', tcpIp); 7 } else { 8 $('#in_edit_sjjh').textbox('setValue', httpIp); 10 } 11 } 12 })
使用
$(function () {
})
默认加载后,onSelect事件就可以正常使用了。