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';}}}});

转载于:https://www.cnblogs.com/Cilimer/p/4064722.html

easyUI的combobox设置隐藏和显示相关推荐

计算机如何把文件设为隐藏,电脑的文件、文件夹如何设置隐藏和显示?
日常生活中我们的电脑经常会需要去隐藏一些不能被别人看到的东西,比如一些重要的文件,那么电脑的文件.文件夹如何设置隐藏和显示?下面我们一起来看看吧! 方法/步骤 1.好了,我们开始新建一个文件夹,如图, ...
mac出现文件夹问号_Macbook文件夹怎么设置隐藏或显示？开机带问号的文件夹怎么办？...
时代变了,笔记本电脑竞争也激烈.笔记本电脑每年都变得功能更强大,更薄,更好.然后是平板电脑,它们比笔记本电脑更便携,更便宜,并且有时性能更好.下面小编就为大家介绍一下Macbook文件夹怎么设置隐藏或 ...
button标签设置隐藏和显示_让你更高效的功能——设置、预设的妙用【动态数学软件GeoGebra】...
每次都要反复地.一个个地设置属性? 或者-- 如何让GeoGebra一打开,就是自己想要的界面或功能设置?只需-- 设置喜好,点击"选项"--"保存设置".如此 ...
button标签设置隐藏和显示_离职后我隐藏一张工作表，老板找了一天没找到
小伙伴们早上好~ 今天给大家介绍一个骚气的小技巧,隐藏工作表,任你十八般武艺,怎么都找不到~ 普通隐藏工作表方法大家都知道,Excel中隐藏工作表,最普遍的方法就是选中工作表插页,右键选择" ...
easyUI datagrid 控制列隐藏和显示
今天使用easyUI修改界面,有两列需要控制不显示,默认情况下列是显示的,如果想要隐藏的话只需要添加一个属性就可以: hidden:'true' 其实跟HTML很相似,在HTML里是通过type属性控 ...
用jQuery设置隐藏和显示
先看代码: HTML css JQ 首先解释css @keyframes规则用来创建动画. 下面的百分几是动画的进度,可有设置什么进度的时候写入什么样式,动画到什么进度的是就会显示什么样式. tran ...
easyui的combobox设置下拉框默认选中某一项
JSP页面:可以这样写,提供option的选项, <input class="easyui-combobox" name="customerStatus" ...
点击事件div的隐藏和显示
按照图片步骤来做 1.先设置文字隐藏和显示. 2.在设置div和类. 3.设置完样式之后设置css的div. 4.上面的的设置隐藏和显示的div的宽和高and颜色. 5.设置js样式,第一设置隐藏和显 ...
easyUI的combobox选中无法显示
easyUI的combobox选中无法显示最近,在使用easyUI做前台的页面,遇到一个非常奇葩的问题,就是easyUI的combobox,有下拉的内容,但是,选中之后不会显示到其中文本框中. 首先 ...

easyUI的combobox设置隐藏和显示

easyUI的combobox设置隐藏和显示相关推荐

最新文章

热门文章