Estoy tratando de crear una función en la que se mostrará el div en función de la selección de la opción del cuadro de selección y la opción seleccionada desaparecerá, nuevamente, si el div está oculto, aparecerá la opción del cuadro de selección.

por ejemplo, en mi código cuando selecciono la opción roja , entonces div#red show();

Cuando hago clic en cancelar ('rojo'), el div desaparece como se esperaba, la opción de selección para rojo aún se elimina, quiero reflejar lo mismo.

como logro el objetivo ayuda

 <select id="colorselector"> <option value="0" selected>--</option> <option value="red">Red</option> <option value="yellow">Yellow</option> <option value="blue">Blue</option> </select> <div id="red" class="colors" style="display:none; color:red"> red... <span><a onclick="cancel('red')">Cancel</a></span> </div> <div id="yellow" class="colors" style="display:none; color:yellow"> yellow.. <span><a onclick="cancel('yellow')">Cancel</a></span> </div> <div id="blue" class="colors" style="display:none; color:blue"> blue.. <span><a onclick="cancel('')">Cancel</a></span> </div>

 $(function() { $('#colorselector').change(function() { $('.colors').hide(); $('#' + $(this).val()).show(); $('option:selected').remove(); }); }); function cancel(num) { $("div#" + num).remove(); }