Tengo un caso de uso en nuestra interfaz de usuario, donde necesito realizar algunas operaciones de JQuery para llenar dinámicamente un cuadro desplegable. Aquí está el escenario:

Tengo los siguientes dos cuadros de selección y sus opciones:

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

Cualquier cambio/selección para select1 invoca una función de controlador de cambios, que debe realizar las siguientes acciones para select2:

• Si selecciona 1 == opción 1, agregue una opción para "N/A" (no desea que se vea esta opción), establezca "N/A" como valor
• De lo contrario, saque "N/A" si previamente seleccionó la opción 1, seleccione ""
• Debería poder cambiar repetidamente select1 y obtener el mismo comportamiento

Esto es lo que he probado:

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

Independientemente de lo que se seleccione en select1, la selección/opciones para select2 no cambian. Cualquier ayuda/indicaciones sería muy apreciada.