• easyUI下拉列表点击事件的使用


    可以通过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事件就可以正常使用了。
     
  • 相关阅读:
    软件工程基础
    第一个微信小项目
    数据库实践
    爬虫
    模拟体育竞技
    自己的第一个网页
    科学计算和可视化
    结队项目
    自动生成小学四则运算
    自动生成小学四则运算
  • 原文地址:https://www.cnblogs.com/chenglc/p/6872096.html
Copyright © 2020-2023  润新知