使用JQuery添加/删除选项

时间:2014-03-03 23:48:35

标签: javascript jquery html

我想在另一个选项中使用JQuery从一个下拉菜单中添加和删除选项。

HTML:

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

First DropDown菜单

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>

第二个DropDown菜单

<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。 这样做的最佳方式是什么?

感谢您的时间!

1 个答案:

答案 0 :(得分:0)

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