javascript - 使用 JQuery 添加/删除选项

Question

我想使用 JQuery 从一个下拉菜单中添加和删除选项，同时给定另一个下拉菜单中的选定选项。

HTML:

<form action='quickLook.py' method = 'post'>

第一个下拉菜单

Specify Channel:
<select id='bolometer'>
<option selected id='Dual' value = 'Dual' >Dual
<option  id='Top' value = 'Top' >Top
<option  id='Bottom' value = 'Bottom' >Bottom
</select>

第二个下拉菜单

<br>Specify Data to Display:
<select id='target'>
<option selected id='Spectrum' value = 'Spectrum'>Spectrum
<option  id='Interferogram' value = 'Interferogram'>Interferogram
<option  id='SNR' value = 'SNR'>SNR
<option  id='Diff_Band' value = 'Diff_Band'> Diff_Band
</select>

<input type='submit' value= 'Query Images'>

</form>

我想做这样的事情，JQuery:

$("#Dual").click(function() {
    $("#target").append("#Diff_Band");
    $("#target").remove("#Interferogram");
    $("#target").remove("#SNR");
});

$("#Top").click(function() {
    $("#target").append("#Interferogram");
    $("#target").append("#SNR");
    $("#Diff_Band").remove();

});

我想追加或删除已编写的 html。最好的方法是什么？

感谢您的宝贵时间!

Answer 1

这是我在使用 Safari 之前遇到的类似问题。解决方案是使用 .detach()而不是 remove()，因为它保留与删除的元素关联的所有 jQuery 数据。检查这个jsfiddle:http://jsfiddle.net/Ueu62/