javascript - 无法弄清楚为什么我的选择下拉菜单只更新一次

Question

我正在使用 JQuery 根据另一个选择下拉列表的值来更新选择下拉列表的默认选项。由于某种原因，更新仅适用于第一次更改，我不明白为什么。

HTML:

<label>Enclosure Type:</label>
<select name="enclosure_type_it">
    <option value="global">Global </option>
    <option value="server_optimized">Server Optimized </option>
</select>
<div class="pure-control-group">
    <label>Handles:</label>
    <select name="handles_it" id="handles_datacenter">
        <option value="Semi Cylinder">Semi Cylinder</option>
        <option value="Combo_Security Handle">Combo/Security Handle </option>
        <option value="Comfort Handle">Comfort Handle </option>
    </select>
</div>
<div class="pure-control-group">
    <label>Inserts:</label>
    <select name="inserts_it" id="inserts_datacenter">
        <option value="Pushbutton">Pushbutton </option>
        <option value="Locking pushbutton">Locking pushbutton </option>
        <option value="Locking">Locking </option>
    </select>
</div>

JQuery:

$('#enclosure_type_it').change(function() {
    if ($(this).val() == "global") {
        $('#handles_datacenter option[value="Semi Cylinder"]').attr("selected", true);
        $('#inserts_datacenter option[value="Locking"]').attr("selected", true);
    }
    if ($(this).val() == "server_optimized") {
        $('#handles_datacenter option[value="Comfort Handle"]').attr("selected", true);
        $('#inserts_datacenter option[value="Locking pushbutton"]').attr("selected", true);
    }
}).change();

仍然不确定我做错了什么:http://jsfiddle.net/y7easnb7/

Answer 1

使用.val()要设置值，您还需要使用enclosure_type_it作为选择的ID。

HTML

<select id="enclosure_type_it">

脚本

$('#enclosure_type_it').change(function() {
    if ($(this).val() == "global") {
        $('#handles_datacenter').val("Semi Cylinder");
        $('#inserts_datacenter').val("Locking");
    }
    if ($(this).val() == "server_optimized") {
        $('#handles_datacenter').val("Comfort Handle");
        $('#inserts_datacenter').val("Locking pushbutton");
    }
}).change();

如果你想使用名称属性。使用以下作为选择器

$('select[name="enclosure_type_it"]')