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。例如：

如果选择兰开斯特县选项，将仅显示West Donegal Township，West Lampeter Township，East Hempfield Township，Warwick Township选项。

或者，如果选择了Berks County选项，则只显示Spring of Spring。

我已经尝试了其他jquery代码示例来使这个函数工作，似乎无法让它做我需要的东西。我对jquery / javascript知之甚少，所以任何帮助都会受到赞赏。

Answer 1

我已经使用类和额外的选择完成了它。我们的想法是拥有一个乡镇的“锅”，以便在选择一个县时提取数据。

您需要为county选择中的每个选项添加一个类，并为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获取相关下拉列表的数据。

了解如果我们从第一个组合框中选择一个值，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）放入更改功能中。这使得它在组合框外部是暂时的，也是不可用的。如果您的地图非常大，地图的隐私性并不是问题，您可以考虑将其放在更改事件之前（即首先未准备好的功能定义）。

jquery根据另一个select值动态更改select选项

2 个答案: