我知道这里有几个示例,但我仍然无法让我的 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');
}
});
当我运行我的代码时发生了什么: 应该附加的选项不断被一遍又一遍地添加。
最佳答案
你没有在你的 html 中使用 id id="xpress_mod_data"
这个丢失了 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>
查询
$('#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');
}
});
关于javascript - 根据先前选择的下拉列表删除选择下拉选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28735206/