I have the question of how to disable options of a select
, depending on another select
.
For example:
//SELECT 1
<select class="opciones">
<option value="1">Opcion 1</option>
<option value="2">Opcion 2</option>
</select>
//SELECT 2
<select>
<option value="1">Ejemplo #1</option>
<option value="2">Ejemplo #2</option>
<option value="3">Ejemplo #3</option>
<option value="4">Ejemplo #4</option>
</select>
At the time of choosing, for example, in the select1
choose opcion 1
, then disable in the second select2
: ejemplo 1
and ejemplo 2
.
$(".caja").on("change",".opciones",function(){
/*obtener opciones elegidas del select*/
var opciones = $(".opciones option:selected");
opciones = parseInt(opciones);
if(opciones == 1)
{
// ??
}
});
How could it be done?
You can achieve it like this with pure JS:
id
unique to eachselect
<option></option>
with the help of the propertytext
change
to listen when a selection occurs in the dropdownselect
one we have is a list of nodes so we can treat it as a vectordisabled
which we assign a boolean value astrue
EXAMPLE
Once they are disabled, if we choose any other menu option we can re-enable them by handling that behavior in the conditional structure through the else block like so:
Edition
The same solution but with an object oriented approach :