easyui实现多选下拉框添加多选框图标,所选内容放到div里展示



js部分

function initComboboxtext(id,url,valueField,textField,id_con,seconddata,secondurl,param){
   
         var value = "";

     $.ajax({
url: url,
               type: "POST",
               data: {parentId:param},
               dataType: "json",
               async:false,
               success:function(result){
         if(result.success){
        console.log(result);
          $('#'+id).combobox({
                       data:result.data,
                       valueField:valueField,
                       textField:textField,
                       multiple:true,
                       formatter: function (row) { //formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法
                          /* console.info(json)*/
console.log(row);
                       
                           if(row.selected==true){
                               opts = "<input type='checkbox' checked='checked' id='"+row.area_code+"' value='"+row.area_code+"'>"+row.complain_class_name+"</input>";
                           }else{
                               opts = "<input type='checkbox' id='"+row.area_code+"' value='"+row.area_code+"'>"+row.complain_class_name+"</input>";
                           }
                           return opts;
                       },
                       onLoadSuccess: function () {  //下拉框数据加载成功调
                           var opts = $(this).combobox('options');
                           var target = this;
                           var values = $(target).combobox('getValues');//获取选中的值的values
                          
                           $.map(values, function (value) {
                               var el = opts.finder.getEl(target, value);
                               el.find('input.combobox-checkbox')._propAttr('checked', true);
                           })
                       },
                       onSelect: function (row) { //选中一个选项时调用


                           var opts = $(this).combobox('options');
                           //获取选中的值的values
                           $("#"+id).val($(this).combobox('getValues'));
                          
                           console.info($(this).combobox('getValues'))


                           //设置选中值所对应的复选框为选中状态
                           var el = opts.finder.getEl(this, row[opts.valueField]);
                           el.find('input')._propAttr('checked', true);
                           $("#"+id_con).html($(this).combobox('getText'));
                       },
                       onUnselect: function (row) {//不选中一个选项时调用
                           var opts = $(this).combobox('options');
                           //获取选中的值的values
                           $("#"+id).val($(this).combobox('getValue'));
                           console.info($(this).combobox('getValue'))
                           $("#"+id_con).html($(this).combobox('getText'));
                           var el = opts.finder.getEl(this, row[opts.valueField]);
                           el.find('input')._propAttr('checked', false);
                       }
                   });
        }
        },
        error:function(request, textStatus, errorThrown){
        //$(combId).combobox("loadData",[defaultComb]);
        }
});

}



//加载投诉分类二级多选框
function loadWorktaskType() {
$("#worktask_service_type").combobox({
   onHidePanel:function(){
        var secondData=$(this).combobox('getValues');
        //console.log(secondData);
        var url = "yjwy/complain/class/queryForCombobox";
    initComboboxtext('worktask_worktask_type', url,"pk_complain_class", "complain_class_name",'worktask_worktask_type_con',secondData);
       },
       onShowPanel:function(){
        $("#worktask_worktask_type_con").html("");
       }
})
}
//加载投诉分类一级多选框
function loadServiceType() {
var url = "yjwy/complain/class/queryForCombobox";
initComboboxtext("worktask_service_type", url,"pk_complain_class","complain_class_name","worktask_service_type_con");
}



html代码

                                      <tr>
<td style="text-align: end; padding-right: 10px;">
<label>投诉分类(一级):</label>
<input class="easyui-combobox" data-options="editable:false,separator:';'"
name="service_type" id="worktask_service_type"
style="width: 150px;"/>
</td>

                                       <!--展示多选的内容-->
<th colspan="4" style="width:78%;font-weight:100">
<div id="worktask_service_type_con" style="border:1px solid #ddd;min-height:25px;line-height:25px;"></div>
</th>
</tr>
<tr>
<td style="text-align: end; padding-right: 10px;">
<label>投诉分类(二级):</label>
<input class="easyui-combobox" data-options="editable:false,separator:';'"
name="worktask_type" id="worktask_worktask_type"
style="width:150px;"/>
</td>
<th colspan="4" style="width:78%;font-weight:100">
<div id="worktask_worktask_type_con" style="border:1px solid #ddd; min-height:25px;line-height:25px;">
</div>
</th>
</tr>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值