Add/Removing Options with JQuery

Question

I'd like to add and remove options from one drop down menu using JQuery given a selected option in another.

HTML:

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

First DropDown Menu

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>

Second DropDown Menu

<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>

I'd like to do something like this is 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();

});

I want to append or remove the already written html. What is the best way to do this?

Thank you for your time!

Answer 1

This is a similar problem I've encountered before working with Safari. A solution is to use .detach() instead of remove() as it keeps all jQuery data associated with the removed elements. Check this jsfiddle: http://jsfiddle.net/Ueu62/