今天遇到一個需求,需要在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

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的easyUI的combobox设置隐藏和显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。