根据第一个 select 列表过滤第二个 select 列表
Filtering second select list based on first select list
我在第二个 select 列表中有一些时区,我想按包含国家/地区的第一个 select 列表进行过滤。
Select 列表 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>
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>
它适用于由单个单词组成的国家/地区名称,但任何带空格的国家/地区名称均无效。我看不出哪里错了。
改变一下
var options = jQuery(this).data('options').filter('[data-country=' + id + ']');
到
var options = jQuery(this).data('options').filter('[data-country="' + id + '"]');
替换为:
[data-country=' + id + ']
由此 :
[data-country="' + id + '"]
我在第二个 select 列表中有一些时区,我想按包含国家/地区的第一个 select 列表进行过滤。
Select 列表 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>
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>
它适用于由单个单词组成的国家/地区名称,但任何带空格的国家/地区名称均无效。我看不出哪里错了。
改变一下
var options = jQuery(this).data('options').filter('[data-country=' + id + ']');
到
var options = jQuery(this).data('options').filter('[data-country="' + id + '"]');
替换为:
[data-country=' + id + ']
由此 :
[data-country="' + id + '"]