miniUI中 ComboBox聯動的一個問題

在用miniUI來寫程序的時候遇見的一點小問題，記下來，也算分享下

需求如下：“請選擇”下面有5個可選項，可供選擇，根據這些條件來查詢有關信息；當選擇的是“用戶名”，“真實姓名”，“手機號”的時候，后面緊跟着的是一個文本框格式的框，可以輸入要查詢的相關信息；

當選擇的是“所屬地市”，“所屬部門”的時候，緊跟的要變為一個下拉菜單，內容根據“所屬地市”或者“所屬部門”來加載，如圖所示：

解決方案如下：

html頁中我是這么的去做的，根據不同的條件定義不同的div，然后在JS中對第一個下拉框中選擇的信息進行判斷，然后再顯示相關div，隱藏無關的div

<table style="width: 100%; height: 30px;">
                    <tr>
                        <td align="left" style="width: 50px;">
                            <div id="cb1" style="float: left;width: 120px;">
                                <input id="cmb1" value="Selected" url="SearchText.txt" class="mini-combobox" allowinput="false" onvaluechanged="GetFollow()";/></div>&nbsp;&nbsp;
                            <div id="cbTextbox" style="float: left;margin-left:10px;width: 110px;">
                                <input id="key" class="mini-textbox" onenter="onKeyEnter" />
                            </div>
                            <div id="cbOrganization" style="float: left;margin-left:10px;width: 110px;display:none">
                                <input id="keyOrganization"  url="getCity.ashx?t=s&method=SearchCity" class="mini-combobox" allowinput="false" />
                            </div>
                             <div id="cbDepartment" style="float: left;margin-left:10px;width: 110px;display:none">
                                <input id="keyDepartment" value="加管" url="Department.txt" class="mini-combobox" allowinput="false" />
                            </div>
                            &nbsp; <a class="mini-button" iconcls="icon-search" onclick="searchData()" plain="true">
                                查詢</a>
                        </td>
                    </tr>
                </table>

function GetFollow() {
    var div = document.getElementById("cb2");
    var selectInfo = mini.get("cmb1").getValue();
    if (selectInfo == "UserName" || selectInfo == "RealName" || selectInfo == "Mobile") {
    //例如第一個下拉菜單選擇的是”用戶名“的話，則顯示出來cbTextbox的div，隱藏另外兩個
        document.getElementById("cbTextbox").style.display = "block";
        document.getElementById("cbOrganization").style.display = "none";
        document.getElementById("cbDepartment").style.display = "none";
    }else if (selectInfo == "Organization") {
        document.getElementById("cbTextbox").style.display = "none";
        document.getElementById("cbOrganization").style.display = "block";
        document.getElementById("cbDepartment").style.display = "none";
    } else if (selectInfo == "Department") {
        document.getElementById("cbTextbox").style.display = "none";
        document.getElementById("cbOrganization").style.display = "none";
        document.getElementById("cbDepartment").style.display = "block";
    }
}

//#region //查詢
function searchData() {
    var selectInfo = mini.get("cmb1").getValue();
    var key;
    if (selectInfo == "Selected") {
        alert("請您選擇查詢條件");
    } else if (selectInfo == "UserName" || selectInfo == "RealName" || selectInfo == "Mobile") {
        key = mini.get("key").getValue();
    } else if (selectInfo == "Organization") {
        key = mini.get("keyOrganization").getValue();
    } else if (selectInfo == "Department") {
        key = mini.get("keyDepartment").getValue();
    }
    var newkey = { key: key, selectInfo: selectInfo };
    grid.load(newkey);
}
function onKeyEnter(e) {
    searchData();
}
//#endregion