I have a use case in our UI, where I need to perform some hacky JQuery operations to dynamically populate a drop down box. Here is the scenario:

I have the following two select boxes and their options:

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

Any change/selection for select1, invokes a change handler function, which needs to perform the following actions for select2:

• If select1 == option1, Add an option for "N/A" (don't want this option to be seen), set "N/A" as the value
• Otherwise, take out "N/A" if option 1 was previously selected, select ""
• You should be able to repeatedly change select1 and get the same behavior

This is what I have tried:

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();
}

Regardless of what is selected on select1, the selection/options for select2 do not change. Any help/pointers would be greatly appreciated.