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

    效果图:

      

  • 相关阅读:
    符号表
    经典算法-堆排序
    AngularJs基础
    Echars详解
    经典算法-快速排序
    经典算法-递归
    异常分类,异常抛出位置
    js的数据类型具体分析
    函数
    数据
  • 原文地址:https://www.cnblogs.com/wgl0126/p/9230686.html
Copyright © 2011-2022 走看看