的jQuery正在與舊版本（1.3）不與新版本（1.11.3）

Question

var country = { 
 
    "Choose Country": [{ 
 
    "city": "Choose City" 
 
    }], 
 
    "Australia": [{ 
 
    "city": "Brisbane" 
 
    }, { 
 
    "city": "Melbourne" 
 
    }, { 
 
    "city": "Sydney" 
 
    }], 
 
    "Bahrain": [{ 
 
    "city": "Hamad Town" 
 
    }, { 
 
    "city": "Manama" 
 
    }, { 
 
    "city": "Muharraq" 
 
    }, { 
 
    "city": "Riffa" 
 
    }], 
 
    "Canada": [{ 
 
    "city": "Calgary" 
 
    }, { 
 
    "city": "Montreal" 
 
    }, { 
 
    "city": "Toronto" 
 
    }, { 
 
    "city": "Vancouver" 
 
    }] 
 
}; 
 

 
function populateuser_city() { 
 
    var region_code1 = $('#region_code1').val(); 
 
    var select = $('#user_city'); 
 
    var options = select.attr('options'); 
 
    $('option', select).remove(); 
 
    $.each(country[region_code1], function(index, array) { 
 
    options[options.length] = new Option(array['city']); 
 
    }); 
 
} 
 

 
populateuser_city(); 
 

 
$('#region_code1').change(function() { 
 
    populateuser_city(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<select id="region_code1" name="region_code1" class="form-control" data-bv-message="Please select Country Code" required> 
 
    <option>Choose Country</option> 
 
    <option value="Australia">Australia (+61)</option> 
 
    <option value="Bahrain">Bahrain (+973)</option> 
 
    <option value="Canada">Canada (+1)</option> 
 
</select> 
 
<select id="user_city" name="user_city" class="form-control" data-bv-message="Please select City" required></select>

Answer 1

你的問題是因爲var options = select.attr('options');是jQuery中的較新版本返回undefined工作。您可以通過替換select元素的HTML來修復此問題，並改進邏輯，而不是修改其中的現有option元素。試試這個：

var country = { 
 
    "Choose Country": [ 
 
    { "city": "Choose City" } 
 
    ], 
 
    "Australia": [ 
 
    { "city": "Brisbane" }, 
 
    { "city": "Melbourne" }, 
 
    { city": "Sydney" } 
 
    ], 
 
    "Bahrain": [ 
 
    { "city": "Hamad Town" }, 
 
    { "city": "Manama" }, 
 
    { "city": "Muharraq" }, 
 
    { "city": "Riffa" } 
 
    ], 
 
    "Canada": [ 
 
    { "city": "Calgary" }, 
 
    { "city": "Montreal" }, 
 
    { "city": "Toronto" }, 
 
    { "city": "Vancouver" } 
 
    ] 
 
}; 
 

 
$('#region_code1').change(function() { 
 
    var region_code1 = $('#region_code1').val(); 
 
    var html = '' 
 
    country[region_code1].forEach(function(country) { 
 
    html += '<option>' + country.city + '</option>'; 
 
    }) 
 
    $('#user_city').empty().html(html); 
 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<select id="region_code1" name="region_code1" class="form-control" data-bv-message="Please select Country Code" required> 
 
    <option>Choose Country</option> 
 
    <option value="Australia">Australia (+61)</option> 
 
    <option value="Bahrain">Bahrain (+973)</option> 
 
    <option value="Canada">Canada (+1)</option> 
 
</select> 
 
<select id="user_city" name="user_city" class="form-control" data-bv-message="Please select City" required></select>