在開(kāi)發(fā)中常常會(huì)遇到菜單的級(jí)聯(lián)操作，比如：國(guó)家、城市、鄉(xiāng)鎮(zhèn)的選擇等。當(dāng)選中某個(gè)國(guó)家的時(shí)候，后面的菜單會(huì)把該國(guó)家內(nèi)的城市羅列出來(lái)，當(dāng)選中城市的時(shí)候，后面的菜單會(huì)把對(duì)應(yīng)的鄉(xiāng)鎮(zhèn)列出來(lái)。 

解決這種菜單的級(jí)聯(lián)操作的辦法，我理解的有兩種：

①使用js來(lái)實(shí)現(xiàn)，把頁(yè)面所用到的級(jí)聯(lián)數(shù)據(jù)放到j(luò)s內(nèi)，當(dāng)頁(yè)面加載完成后，通過(guò)js顯示到對(duì)應(yīng)的select內(nèi)，這種方法的解決辦法有很多種，最為直觀的一種是放到多維數(shù)組中，每個(gè)人的思維不一樣，這里就不詳細(xì)解說(shuō)。

②使用ajax異步動(dòng)態(tài)加載，然后顯示到對(duì)應(yīng)的select內(nèi)，這種方法很便捷，建議在開(kāi)發(fā)中使用。

下面看一個(gè)開(kāi)發(fā)中的小例子： 

JSP簡(jiǎn)短頁(yè)面： 

      <div class="form-group">        <label class="col-sm-2 control-label">設(shè)備類別</label>        <div class="col-sm-4">          <select class="basic-single" name="codeCategory" onchange="showCodeSubCate()" id="codeCategory" style="width: 100%">                    </select>        </div>        <label class="col-sm-2 control-label">設(shè)備子類</label>        <div class="col-sm-4">          <select class="basic-single" name="codeSubCategory" id="codeSubCate" disabled="disabled" style="width: 100%">            <option value="">--請(qǐng)選擇--</option>          </select>        </div>
</div>

該頁(yè)面內(nèi)涉及到了兩個(gè)select，分別為：設(shè)備分類和設(shè)備子類，其中設(shè)備分類為一級(jí)菜單，設(shè)備子類為二級(jí)菜單，設(shè)備子類的顯示內(nèi)容由設(shè)備分類決定。 

下面來(lái)看ajax代碼段： 

function addCodeCategory(){    $.ajax({      url: "<%=request.getContextPath()%>/facilitydict/showCodeCategory",      async: false, //請(qǐng)求是否異步，默認(rèn)為異步，這也是ajax重要特性      type: "GET",  //請(qǐng)求方式      success: function(result) {        result = $.parseJSON(result);        var data = result.data;        var codeCates = data.split(",");        str ='<option value="6801">--請(qǐng)選擇--</option>';        for(x in codeCates){          str+='<option value="'+codeCates[x]+'">'+codeCates[x]+'</option>';        }        $("#codeCategory").html(str);              }    });  }    function showCodeSubCate(){    $("#codeSubCate").prop("disabled","");//將設(shè)備子類的select解除鎖定    var target = $("#codeCategory option:selected").text();    $.ajax({      url: "<%=request.getContextPath()%>/facilitydict/showCodeSubCategory",      data : {codeCategory:target},      async: false, //請(qǐng)求是否異步，默認(rèn)為異步，這也是ajax重要特性      type: "GET",  //請(qǐng)求方式      success: function(result) {        result = $.parseJSON(result);        var data = result.data;        var codeCates = data.split(",");        var str="";        for(x in codeCates){          str+='<option value="'+codeCates[x]+'">'+codeCates[x]+'</option>';        }        $("#codeSubCate").html(str);      }    });  }