demoshop

現在的網頁連動式下拉選單相當的普遍，之前 demo 也有寫過一篇，當時是利用 AJAX.NET Toolkits 來完成的，現在介紹一下使用 jQuery 的寫法。

在 ASP.NET MVC 中註定是不會使用 AJAX.NET Toolkits 所以我們就要來利用 HTML 和 JavaScript（jQuery）來達成，所以此文其實不限定在 ASP.NET MVC 中使用。

連動式選單的經典範例就是郵遞區號，因此 demo 今天就不用郵遞區號來做示範。

為了加強共用性所以我們把下拉選單寫成兩個很簡單的Helper

/// <summary>
/// 居住縣市下拉選單
/// </summary>
/// <param name="helper"></param>
/// <param name="ID">選單的ID</param>
/// <param name="name">選單的name</param>
/// <returns></returns>
public static string GetItemsForDist(this HtmlHelper helper, string ID, string name)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("<select name=" + name + " id=" + ID + ">");
    sb.Append("<option value='0'> 縣市 </option>");
    sb.Append("<option value='TaipeiCity'>台北市</option>");
    sb.Append("<option value='KeelungCity'>基隆市</option>");
    sb.Append("</select>");
    return sb.ToString();
} 

/// <summary>
/// 鄉鎮市區下拉選單
/// </summary>
/// <param name="helper"></param>
/// <param name="ID">選單的ID</param>
/// <param name="name">選單的name</param>
/// <returns></returns>
public static string GetItemsForArea(this HtmlHelper helper, string ID, string name)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("<select name=" + name + " id=" + ID + ">");
    sb.Append("<option value='0' class='sub_TaipeiCity'>行政區</option>");
    sb.Append("<option class='sub_TaipeiCity' value='100'>中正區</option>");
    sb.Append("<option class='sub_TaipeiCity' value='103'>大同區</option>");
    sb.Append("<option class='sub_TaipeiCity' value='104'>中山區</option>");
    sb.Append("<option class='sub_TaipeiCity' value='105'>松山區</option>");
    sb.Append("<option class='sub_TaipeiCity' value='106'>大安區</option>");
    sb.Append("<option class='sub_TaipeiCity' value='108'>萬華區</option>");
    sb.Append("<option class='sub_TaipeiCity' value='110'>信義區</option>");
    sb.Append("<option class='sub_TaipeiCity' value='111'>士林區</option>");
    sb.Append("<option class='sub_TaipeiCity' value='112'>北投區</option>");
    sb.Append("<option class='sub_TaipeiCity' value='114'>內湖區</option>");
    sb.Append("<option class='sub_TaipeiCity' value='115'>南港區</option>");
    sb.Append("<option class='sub_TaipeiCity' value='116'>文山區</option>");
    sb.Append("<option value='0' class='sub_KeelungCity'>行政區</option>");
    sb.Append("<option class='sub_KeelungCity' value='200'>仁愛區</option>");
    sb.Append("<option class='sub_KeelungCity' value='201'>信義區</option>");
    sb.Append("<option class='sub_KeelungCity' value='202'>中正區</option>");
    sb.Append("<option class='sub_KeelungCity' value='203'>中山區</option>");
    sb.Append("<option class='sub_KeelungCity' value='204'>安樂區</option>");
    sb.Append("<option class='sub_KeelungCity' value='205'>暖暖區</option>");
    sb.Append("<option class='sub_KeelungCity' value='206'>七堵區</option>");
    sb.Append("</select>");
    return sb.ToString();
} 

View頁面就可以很好寫

 
<%=Html.GetItemsForDist("Dist", "Dist")%>
 <%=Html.GetItemsForArea("Area", "Area")%> 

這時候執行就是出現兩個下拉選單，並且行政區的選單會包含了所有的"區"當然這不是我們要的，加上神奇的jQuery吧。

在頁面上加上

$(function()
{
  makeSublist('Dist', 'Area');
});

  function makeSublist(parent, child)
  {
      $("body").append("<select style='display:none' id='" + parent + child + "'></select>");
      $('#' + parent + child).html($("#" + child + " option"));
      $('#' + child).html("<option value='0'>行政區</option>");
      $('#' + parent).change(
 function()
 {
     var parentValue = $('#' + parent).attr('value');
     $('#' + child).html($("#" + parent + child + " .sub_" + parentValue).clone());
     if (parentValue=="0")
     {
         $('#' + child).html("<option value='0'>行政區</option>");
     }
 })
 ;            
  } 

上面的 js 寫法重點在於 clone() 這個函式可以把整套複製下來，相當的好用，建議各位一定要看的懂上面在寫什麼，這樣子連動幾層都難不倒你了。

 
為了先能讓大家都看懂，所以 demo 在組下拉選單的 HTML 時用的方法很直覺，不過 ASP.NET MVC 內還有一個更好用的玩意TagBuilder有興趣的可以先研究看看。

http://docs.jquery.com/Manipulation/clone#bool