基于第一选择列表筛选第二选择列表

Filtering second select list based on first select list

本文关键字：选择 列表 筛选 于第一      更新时间：2023-09-26

在第二个选择列表中有一些时区，我希望通过包含国家的第一个选择列表对它们进行筛选。

选择列表1(只是一些时区和国家的例子):

<select id="field_81" class="form-control" name="field_81" required>
    <option value="">Please select your country</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
</select>

选择列表2:

<select id="field_414" name="field_414" required>
    <option value="">Please select your timezone</option>
    <option value="Africa/Abidjan" data-country="Cote d'Ivoire">Africa/Abidjan</option>
    <option value="Africa/Accra" data-country="Ghana">Africa/Accra</option>
    <option value="Africa/Addis_Ababa" data-country="Ethiopia">Africa/Addis_Ababa</option>
    <option value="Africa/Algiers" data-country="Algeria">Africa/Algiers</option>
    <option value="Africa/Asmara" data-country="Eritrea">Africa/Asmara</option>
    <option value="Africa/Bamako" data-country="Mali">Africa/Bamako</option>
    <option value="Africa/Bangui" data-country="Central African Republic">Africa/Bangui</option>
</select>
这是我的jQuery: 
<script>
    jQuery("#field_81").change(function() {
        if (jQuery(this).data('options') == undefined) {
            /*Taking an array of all options-2 and kind of embedding it on the select1*/
            jQuery(this).data('options', jQuery('#field_414 option').clone());
        }
        var id = jQuery(this).val();
        var options = jQuery(this).data('options').filter('[data-country=' + id + ']');
        jQuery('#field_414').html(options);
    });
</script>

对于由单个单词组成的国家名称可以正常工作，但任何带有空格的国家名称都不能工作。我看不出哪里出错了。

替换为

 [data-country=' + id + ']

By this:

[data-country="' + id + '"]

直接修改

var options = jQuery(this).data('options').filter('[data-country=' + id + ']');


var options = jQuery(this).data('options').filter('[data-country="' + id + '"]');
相关文章：