根據先前選擇的下拉列表刪除選擇下拉選項

Question

我知道有一些我在這里看過的例子，但我仍然無法使我的jquery正常工作。

問題：如果用戶從下拉列表＃1中選擇特定選項，則更改下拉列表中的選項＃2如何完成此操作？

HTML / ColdFusion的：

<label>*Xpress Mod/Paint:</label> <cfselect name="xpress_mod_data">
<option value="Non-Xpress">Non Xpress 
<option value="3-Day">3-Day Xpress
</cfselect>

<label>Enclosure Type:</label> <cfselect name="enclosure_type">
<option value="global">Global 
<option value="server_optimized">Server Optimized 
</cfselect>

這是我的JQuery：

$('#xpress_mod_data').change(function() {

        if($(this).attr("value")=="3-Day") {
            $("#enclosure_type option[value='server_optimized']").remove();
        } else {
        $('#enclosure_type').append('<option value="server_optimized">Server Optimized');
        }

});

當我運行我的代碼時發生了什么：應該附加的選項不斷被添加一遍又一遍。

Answer 1

你沒有在你的html id="xpress_mod_data"使用id這個缺少Check Demo here

HTML

   <select name="xpress_mod_data" id="xpress_mod_data">
        <option value="Non-Xpress">Non Xpress </option>
    <option value="3-Day">3-Day Xpress</option>
    </select>

    <label>Enclosure Type:</label>  
    <select name="enclosure_type" id="enclosure_type">
    <option value="global">Global  </option>
    <option value="server_optimized">Server Optimized  </option>
    </select>

jQuery的

$('#xpress_mod_data').change(function() {

 if($(this).val()=="3-Day") {
     console.log('test');
            $("#enclosure_type option[value='server_optimized']").remove();
        } else {
        $('#enclosure_type').append('<option value="server_optimized">Server Optimized');
        }

});

Answer 2

為了獲得更大的靈活性，您需要添加多個鏈式選擇，擁有多個父級或使用Ajax來構建下拉列表，請查看jQuery Chained Selects插件。 （它大大簡化了我需要5個可能的下拉工作的項目。）

http://www.appelsiini.net/projects/chained