基於第一個選擇列表過濾第二個選擇列表

Question

我在第二個選擇列表中有一些時區，我想按照包含國家/地區的第一個選擇列表進行過濾。

選擇列表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> 

它工作正常對於由單個詞組成的國家名稱，但帶有空格的國家名稱不起作用。我看不到我錯在哪裏。

Answer 1

替換此：

[data-country=' + id + '] 

通過這樣的：

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

Answer 2

只要改變

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

到

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