首页 > 代码库 > easyUI的combobox设置隐藏和显示

easyUI的combobox设置隐藏和显示

今天遇到一个需求,需要在combobox选择不同选项时,分别切换另一个控件为text或者combobox.

当时想了各种办法,想将combobx和text切换隐藏,但是都没得到自己想要的效果.最终还是在combobx上加了个div,用来控制div的显示和隐藏,打到自己想要的效果.

不过需要注意的是:当切换到text或其他非combobox时,将combobox的值要设置为空.

如下图所示:

原始状态:

切换为text时效果如图:

切换到combobox时,效果如图:

 

下面贴出控件显示的代码

<!-- 用来切换显示文本 -->            <th id="th${id }">            </th>            <td>                <!-- 显示和隐藏 combobox -->                <div id="hjlxdiv${id }" style="width: auto; display: none;" >                   <input name="hjlx${id }" id="hjlx${id }" class="easyui-combobox" style="width: 152px;"  data-options="valueField:‘itemid‘,textField:‘itemname‘,url:‘warning.lx?method=viewSysObjectById&typeid=11030‘" />                </div>                <!-- 显示和隐藏text -->                <input type="text" name="yjglh${id }" id="yjglh${id }" class="easyui-validatebox" style="width:152px;display:none;"/>            </td>

 

下面是操作的js:

/*        ${id }是Spring从后台传过来的id号,用来区分不同的控件id,不需要的无视就行了    */     $("#pccs"+${id }).combobox({          //调用combobox的onChange方法        onChange: function ddlchange(obj)        {            var id = ${id };            var hjlx= $("#hjlx"+id);            var th1=  $("#th"+id);            //获取text文本控件和combobox的div控件            var yjglh= document.getElementById("yjglh" + id);            var div = document.getElementById("hjlxdiv" + id);            if(obj)            {                if(obj=="1")                {                    //当选择"忽略"时,将combobox的值设置为空 ,控件隐藏掉   th和text设置为显示                    hjlx.combobox(‘setValue‘,‘‘);                    th1.text("依据关联号:");                    div.style.display=‘none‘;                    yjglh.style.display=‘block‘;                }                else if(obj=="3")                {                    //当选择"函调"时,将th的值切换,combobx控件设置为显示,text控件隐藏.                    th1.text("函件类型:");                    div.style.display=‘block‘;                    yjglh.style.display=‘none‘;                }                else                {                    //将th,combobox,text控件都隐藏起来                    var a = hjlx.combobox(‘setValue‘,‘‘);                    th1.text("");                    div.style.display=‘none‘;                    yjglh.style.display=‘none‘;                }            }        }    });

 

easyUI的combobox设置隐藏和显示