zoukankan      html  css  js  c++  java
  • 使用easyui combobox初始化+在input中触发下拉框+获取值

    效果图:

    1.html

    <input id="alarmLeve" class="easyui-combobox" name="alarmLeve" style="100px;display:inline-block;margin-right:20px;"/>
    

    2.js

    //初始化
    $('#alarmLeve').combobox( { 
    	multiple: true,
    	panelHeight: 'auto',//自适应
    	valueField: 'id',//绑定字段ID
        textField: 'text',//绑定字段Name
        onLoadSuccess:function(){
            $(".combo").click(function(){
                     $(this).prev().combobox("showPanel");
           });
       },
    	data:[{
            "id":1,
            "text":"1"
        },{
            "id":2,
            "text":"2"
        },{
            "id":3,
            "text":"3"
        },{
            "id":4,
            "text":"4"
        }],
        formatter: function (row) {
            var opts = $(this).combobox('options');
            return '<input type="checkbox" class="combobox-checkbox" style="margin:0 5px;vertical-align: -2px" id="' + row[opts.valueField] + '">' + row[opts.textField]
        },
        //获取数据URL  
        //选择树节点触发事件  
        onSelect: function (row) {
            var opts = $(this).combobox('options');
            var el = opts.finder.getEl(this, row[opts.valueField]);
            el.find('input.combobox-checkbox')._propAttr('checked', true);
        },
        onUnselect: function (row) {
            var opts = $(this).combobox('options');
            var el = opts.finder.getEl(this, row[opts.valueField]);
            el.find('input.combobox-checkbox')._propAttr('checked', false);
        }
    })
    

    3.获取值

    $('#comboboxlist').combobox('getValue');  //单选时
    $('#comboboxlist').combobox('getValues'); //多选时

    示例:

     4.得到input的字符串

    var l = $('#alarmLeve').combobox('getText');  //得到字符串

    效果图:

      

  • 相关阅读:
    vsftpd的详细配置讲解
    ActiveMQ安装与配置
    Apache安装完之后再安装其他模块
    搭建 LAMP apache2.4 + php5.5 + mysql5.5/6 配置文件没有作用的问题
    LAMP apache2.4 + php5.5 + mysql5.5/6
    进制之间的转换
    Mac 常用属性
    关于颜色值透明度的设置
    关于TextView 的属性
    Android 关于软键盘
  • 原文地址:https://www.cnblogs.com/wgl0126/p/9230686.html
Copyright © 2011-2022 走看看