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 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);

页面效果显示:

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

属性解释:

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事件就可以正常使用了。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wysgfd.html