Rumah > Artikel > hujung hadapan web > easyUI下拉列表点击事件的实例详解
这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了使用easyUI下拉列表点击事件的方法,供大家参考,具体内容如下
可以通过input 和select来创建下拉列表
其中select的创建如下:
[{ "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事件就可以正常使用了。
【相关推荐】
3. Bootstrap 表单验证formValidation 的实例详解
5. jQuery Validate 校验多个name的实例详解
Atas ialah kandungan terperinci easyUI下拉列表点击事件的实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!