基於jQuery的另一個選擇的值動態改變選擇選項

Question

我有兩個HTML選擇下拉菜單：

<select name="county" id="county"> 
<option value="Any">Any County</option> 
<option value="Lancaster County">Lancaster County, PA</option> 
<option value="Berks County">Berks County, PA</option> 
<option value="Montgomery County">Montgomery County, PA</option> 
<option value="Dauphin County">Dauphin County, PA</option> 
<option value="Adams County">Adams County, PA</option> 
<option value="Chester County">Chester County, PA</option> 
<option value="Lebanon County ">Lebanon County, PA</option> 
<option value="Delaware County">Delaware County, PA</option> 
<option value="York County">York County, PA</option> 
<option value="New Castle County">New Castle County, DE</option> 
<option value="Orange County">Orange County, NY</option> 
</select> 

<select name="township" id="township"> 
<option value="Any">Any Township</option> 
<option value="Bethel Township">Bethel Township</option> 
<option value="Borough of Cornwall">Borough of Cornwall</option> 
<option value="Concord Township">Concord Township</option> 
<option value="Cumberland Township">Cumberland Township</option> 
<option value="Derry Township">Derry Township</option> 
<option value="East Brandywine Township">East Brandywine Township</option> 
<option value="East Hempfield Township">East Hempfield Township</option> 
<option value="Kennett Township">Kennett Township</option> 
<option value="Lower Merion Township">Lower Merion Township</option> 
<option value="New Castle County">New Castle County</option> 
<option value="Penn Township">Penn Township</option> 
<option value="Springfield Township">Springfield Township</option> 
<option value="Town of Warwick">Town of Warwick</option> 
<option value="Township of Spring">Township of Spring</option> 
<option value="Treddyfrin Township">Treddyfrin Township</option> 
<option value="Warwick Township">Warwick Township</option> 
<option value="West Bradford Township">West Bradford Township</option> 
<option value="West Donegal Township">West Donegal Township</option> 
<option value="West Lampeter Township">West Lampeter Township</option> 
<option value="West Vincent Township">West Vincent Township</option> 
<option value="West Whiteland Township">West Whiteland Township</option> 
<option value="York Township">York Township</option> 
</select> 

我需要一個jquery腳本，執行以下操作：

當選擇了一個特定的#county option，僅顯示適當的#township options。例如：

如果選擇了蘭開斯特縣選項中，只有西多尼戈爾鄉，西蘭彼得鄉，東Hempfield鄉，將顯示沃裏克鎮選項。

或者，如果選擇了伯克斯縣選項，只有春鄉將被顯示。

我試過的jQuery代碼等例子來使該功能的工作，似乎無法得到它做什麼，我需要。我有一點jquery/javascript的知識，所以任何幫助將不勝感激。

Answer 1

我已經做了它使用類和一個額外的選擇。這個想法是讓鄉鎮有一個「鍋」來從選定縣的時候提取數據。

您需要爲county select中的每個選項添加一個類，併爲pot選擇選項添加相應的類。例如，對於蘭開斯特縣，我已經添加了類lancaster，然後在每個您要選擇蘭卡斯特時現身pot選項，我已經添加了同一類。我已經做了第一個3你在下面的代碼：

HTML：

<select name="county" id="county"> 
    <option value="Any" class="any">Any County</option> 
    <option value="Lancaster County" class="lancaster">Lancaster County, PA</option> 
    <option value="Berks County" class="berks">Berks County, PA</option> 
    <option value="Montgomery County">Montgomery County, PA</option> 
    <option value="Dauphin County">Dauphin County, PA</option> 
    <option value="Adams County">Adams County, PA</option> 
    <option value="Chester County">Chester County, PA</option> 
    <option value="Lebanon County ">Lebanon County, PA</option> 
    <option value="Delaware County">Delaware County, PA</option> 
    <option value="York County">York County, PA</option> 
    <option value="New Castle County">New Castle County, DE</option> 
    <option value="Orange County">Orange County, NY</option> 
</select> 

<select name="township" id="township"> 
    <option value="Any">Any Township</option> 
</select> 

<select id="pot"> 
    <option value="Any" class="any">Any Township</option> 
    <option value="Bethel Township">Bethel Township</option> 
    <option value="Borough of Cornwall">Borough of Cornwall</option> 
    <option value="Concord Township">Concord Township</option> 
    <option value="Cumberland Township">Cumberland Township</option> 
    <option value="Derry Township">Derry Township</option> 
    <option value="East Brandywine Township">East Brandywine Township</option> 
    <option value="East Hempfield Township" class="lancaster">East Hempfield Township</option> 
    <option value="Kennett Township">Kennett Township</option> 
    <option value="Lower Merion Township">Lower Merion Township</option> 
    <option value="New Castle County">New Castle County</option> 
    <option value="Penn Township">Penn Township</option> 
    <option value="Springfield Township" class="berks">Springfield Township</option> 
    <option value="Town of Warwick">Town of Warwick</option> 
    <option value="Township of Spring">Township of Spring</option> 
    <option value="Treddyfrin Township">Treddyfrin Township</option> 
    <option value="Warwick Township" class="lancater">Warwick Township</option> 
    <option value="West Bradford Township">West Bradford Township</option> 
    <option value="West Donegal Township" class="lancaster">West Donegal Township</option> 
    <option value="West Lampeter Township" class="lancaster">West Lampeter Township</option> 
    <option value="West Vincent Township">West Vincent Township</option> 
    <option value="West Whiteland Township">West Whiteland Township</option> 
    <option value="York Township">York Township</option> 
</select> 

JS：

$('#county').change(function() { 
    // get the class of the selected option 
    var select_class = $("option:selected", this).attr("class"); 
    // clone all options from the pot select 
    var $options = $('#pot > option.'+select_class).clone(); 
    // delete all of the options in the township select and append 
    // the new options 
    $('#township') 
     .find('option') 
     .remove() 
     .end() 
     .append($options); 
}); 

CSS：

select#pot { 
    display: none; 
} 

Fiddle

Answer 2

我認爲你需要什麼是要了解它是如何完成的。

首先注意到這種類型的功能被稱爲依賴下拉/組合框或級聯下拉/組合框。

通常的實現方式是，依賴下拉的數據在運行時使用jquery從源代碼獲取，例如通過Ajax調用服務器，或者像Javascript地圖或數組那樣的客戶端端源代碼。

明白，如果我們選擇從第一個組合框中的值，jQuery將清理除非我們先儲存它們第一未從HTML所需的選項。正因爲我們總是從HTML獲取它們，所以選項數據不會丟失。

這裏是下面的代碼，這裏的小提琴http://jsfiddle.net/ZerL3/1/

請注意，我也採取了未選擇事件的照顧，或當你選擇「任何」，從下拉菜單，所有選項必須顯示

$(document).ready(function(){ 
$("#county").change(function() { 
    var comboMap={ 
     "Lancaster County": 
      ["West Donegal Township", 
      "West Lampeter Township"], 
     "ABC County": 
      [ 
      "PQR", 
      "XYZ" 
      ]};//keep adding to map here 
     $('#township').empty(); 

     var county = $(this).val(); 

    var lcns = comboMap[county] || []; 
    var html=[]; 
    if(lcns.length===0) { 
     var lcnsAll=comboMap; 
     $.each(lcnsAll,function(i,item){ 
      lcns=item; 
     html +=$.map(lcns, function(lcn){ 
      return '<option value="' + lcn + '">' + lcn + '</option>';}).join(''); 

       }); 
       } 
       else { 
     html = $.map(lcns, function(lcn){ 
      return '<option value="' + lcn + '">' + lcn + '</option>'; 
     }).join('');} 
        $('#township').html(html); 
    }); 

    }); 

PS：請注意，我已將地圖（comboMap）放入更改函數中。這使得它在組合框外瞬變並且不可用。如果你的地圖非常大，它和地圖的隱私不是問題，你可以考慮把它放在改變事件之前（即第一件事是未準備好的功能定義）。