Tengo una opción de selección con un enlace <a> como este:

 <select id="varUsage" class="form-control"> <option value="weight">Weight</option> <option value="color">Color</option> <option value="quality">Quality</option> </select> <a id="submitUsage" class="btn btn-primary btn-lg">Add</a>

Ahora hice esta función onclick para cuando los usuarios hacen clic en Agregar :

 $("#submitUsage").click(function(){ var selectedUsage = $("#varUsage").val(); $('#' + selectedUsage).removeAttr( 'style' ); });

Entonces, básicamente elige el valor de la entrada de selección como variable de uso selectedUsage y elimina el atributo de style de un div que tiene el mismo valor de identificación.

Entonces, básicamente, la descripción general predeterminada de los divs es así:

 <div id="weight" style="display:none"> .... </div> <div id="color" style="display:none"> .... </div> <div id="quality" style="display:none"> .... </div>

Ahora esta función funciona bien solo para id="weight" div. Entonces, cuando los usuarios eligen la opción Peso de la lista del menú de selección, el div con weight aparece correctamente en la pantalla.

Pero esto no funciona para las otras dos opciones y sus divisiones relacionadas aún están ocultas cuando se seleccionan.

Entonces, ¿qué está yendo mal aquí?

¿Cómo puedo mostrar correctamente div personalizado cuando está seleccionado en la opción de selección y luego el usuario presiona el enlace Agregar ?