首页 > 代码库 > 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设置隐藏和显示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。