基于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）放入更改函数中。这使得它在组合框外瞬变并且不可用。如果你的地图非常大，它和地图的隐私不是问题，你可以考虑把它放在改变事件之前（即第一件事是未准备好的功能定义）。