删除 Select 基于先前选择的下拉选项的下拉选项

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 链式选择插件。（它大大简化了我需要 5 个可能的下拉菜单协同工作的项目。）

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

删除 Select 基于先前选择的下拉选项的下拉选项

Remove Select Dropdown option based on previous selection of a dropdown

html

javascript

coldfusion

jquery