使用JQuery的动态下拉列表内容/行为

Question

在我们的UI中有一个用例，我需要执行一些蹩脚的JQuery操作来动态填充一个下拉框。场景如下:

我有以下两个选择框和它们的选项:

<span class="select levelSelect expandable-list  replacement select-styled-list tracked focus select-clone tracking open" tabindex="-1" style="width: 157px; position: absolute; top: 566.733px; left: 338px;">
<select id="select1" name="select1" class="validate[required] withClearFunctions" tabindex="-1">
<option selected="" value="">Select one...</option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
<span class="select-value">Select one...</span>
</span>
<span class="select levelSelect expandable-list  replacement select-styled-list" tabindex="0">
<select id="select2" name="select2" class="validate[required] withClearFunctions" tabindex="-1">
<option selected="" value="">Select one...</option>
<option value="optionA">option A</option>
<option value="optionB">option B</option>
</select>
<span class="select-value">Select one...</span>
</span>

对select1的任何更改/选择都会调用一个更改处理程序函数，该函数需要对select2执行以下操作:

• 如果select1 == option1，添加"N/A"(不希望这个选项被看到)，设置"N/A"值
• 否则，取出"N/A"如果先前选择了选项1，请选择">
• 你应该能够反复更改select1并获得相同的行为

这是我尝试过的:

if (select1 == "option1") {
// Add and select N/A 
$("#select2").append('<option value="N/A">N/A</option>')
$("#select2").val('N/A');
}
else {
// Remove N/A option and select nothing
$("#select2").val('');
$("#select2" + " option[value='N/A']").remove();
}

无论在select1上选择了什么，select2的选择/选项都不会改变。如有任何帮助/指示，将不胜感激。

Answer 1

这是我在每个选择框动作之后缺少的内容:

.trigger('update-select-list').trigger('change');