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