当前位置： 移动技术网 > IT编程>开发语言>JavaScript > easyUI下拉列表点击事件使用方法

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

2018年05月01日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了使用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事件就可以正常使用了。

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网