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');  //得到字符串

    效果图:

      

  • 相关阅读:
    财报就像一本故事书270页完整版本.pdf
    洛克菲勒留给儿子的38封信打包下载
    pip-20.2.3.tar.gz安装包下载
    python-3.8.6rc1-amd64.exe安装包下载
    apache-maven-3.6.3-bin.tar.gz 安装包下载
    中文拼音排序 element-ui的table web端实现
    vue中用axios下载后端的文档流(excel)
    git历史重写
    AMQP
    TODO
  • 原文地址:https://www.cnblogs.com/wgl0126/p/9230686.html
Copyright © 2011-2022 走看看