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