easyui-combobox多选下拉框

来源：互联网发布：全民枪战刷龙软件编辑：程序博客网时间：2024/05/22 07:40

设置easyui-combobox多选下拉框属性为：multiple:true, separator:","multiple为是否多选，separator为key值之间的间隔形式

取多个key值可以var refuseReasonsArray = $("#RefuseReason").combobox('getValues');这样子出来的应该是个数组，

保险一些的话可以这样一下var refuseReasons = refuseReasonsArray.join(",");就分隔为字符串了。

下面是某个系统中的一个拒贷功能，选择拒贷原因的时候是两级联动，且都是多选，并且二级下拉框中如果选择key值为R0901时，弹出某个文本域。。。

先来看html代码：

<div id="refuseReasonDialog" class="easyui-dialog"
   style="width: 500; height: 200;" closed="true">
   <fieldset>
       <legend>
           拒贷原因
       </legend>
       请输入拒贷原因：
       <input class="easyui-combobox" id="showRefuseReason" multiple="true" separator="," />
       <input class="easyui-combobox" id="RefuseReason" multiple="true" separator="," />
       <textarea id="refuseRemark"
           style='width: 470px; height: 100px' maxlength=200 placeholder='请填写备注'
           onkeydown="textCount('refuseRemark','Counter',200);$('#Counter').show()"
           onkeyup="textCount('refuseRemark','Counter',200);$('#Counter').show()"></textarea>
       <div id="Counter">
           还可以输入200个字
       </div>

</fieldset>

******

</div>

初始化JS代码：

//拒贷
       $("#showRefuseReason").combobox({
           url:serverName+"/**********.do?section=refuseReasonTotal",
           textField:"codeVlue",
           valueField:"codeKey",
           editable: false,
           multiple:true,
           separator:",",
           onChange: function (n,o) {
               $("#RefuseReason").combobox('clear');
               $("#RefuseReason").combobox({
                   url:serverName+"/**********.do?section1=refuseReasonTotal&section2=refuseReason&parentKeys="+n,
                   width : 250,
                   textField:"codeVlue",
                   valueField:"codeKey",
                   editable: false,
                   multiple:true,
                   separator:",",
                   onChange: function (n,o) {
                       var remarksSb = "1";
                       if(n!=""){
                           var inti = n.indexOf("R0901");
                           if(inti!=-1){
                               remarksSb="2";
                           }
                       }
                       if(remarksSb=="2"){
                           $("#refuseRemarkSb").show();
                           $("#hsb").val("1");
                       }else{
                           $("#refuseRemarkSb").hide();
                           $("#hsb").val("");
                       }
                   }
               });
           }
       });

最后需要注意的是，在进入这个拒贷dialog的时候需要做一些清空的操作（经过多次的测试，这两个combobox清空值时，这有这样赋值才能清空并且不报错，很奇怪，clear也不好使。），部分代码如下：

    $("#showRefuseReason").combobox('setValue','');
                           $("#RefuseReason").combobox('setText','');
                           $("#refuseRemark").val("");
                           $("#refuseRemarkSby").val("");
                           $("#hsb").val("");
                           $("#refuseRemarkSb").hide();
                            $("#refuseReasonDialog").dialog({
                                closed: false,
                                width: 550,
                                closable: false,
                                modal: true,
                                height: 320,
                                title: "拒贷原因",
                                buttons: [
                                    {
                                        id: "okButton",
                                        text: "确定",
                                        handler: function () {
                                       var refuseReasonsArray = $("#RefuseReason").combobox('getValues');
                                       var refuseReasonsText = $("#RefuseReason").combobox("getText");
                                       var refuseReasons = refuseReasonsArray.join(",");
                                       if(refuseReasons =="" || refuseReasons ==null){
                                           $.messager.alert("消息", "请输入拒贷原因");
                                           return false;
                                    },
                                    {
                                        id: "noButton",
                                        text: "取消",
                                        handler: function () {
                                            $("#refuseReasonDialog").dialog("close");
                                            $("#doButton").linkbutton("enable");
                                            $("#unDoButton").linkbutton("enable");
                                            $("#bcButton").linkbutton("enable");
                                        }
                                    }
                                ]
                            });

0 0