本文主要为大家详细介绍了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事件就可以正常使用了。
相关推荐:
easyui datebox 日期验证之开始日期小于结束时间实例分享
easyui的拖动操作中droppable,draggable用法实例
easyui中的datagrid的行内编辑实例详解
以上就是easyui下拉列表点击事件使用方法实例分享的详细内容。