enable a disabled select when choose a value in another select tag

Question

I have these two select tag:

<select>
  <option value="car">car</option>
  <option value="truck">truck</option>
  <option value="moto">moto</option>
  <option value="none">none</option>
</select>

<select disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

As you can see, my second select have the disabled attribute. I would like in javascript, when I selected the option "car" in my first select, the second select with the car's choice become enabled to make a choice.

How can I proceed in javascript?

Answer 1

JavaScript Version:

document.getElementById("one").onchange = function () {
  document.getElementById("two").setAttribute("disabled", "disabled");
  if (this.value == 'car')
    document.getElementById("two").removeAttribute("disabled");
};

<select id="one">
  <option value="car">car</option>
  <option value="truck">truck</option>
  <option value="moto">moto</option>
  <option value="none">none</option>
</select>

<select disabled id="two">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

jQuery Version:

$('#one').change(function() {
  $('#two').prop('disabled', true);
  if ($(this).val() == 'car') {
    $('#two').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="one">
  <option value="car">car</option>
  <option value="truck">truck</option>
  <option value="moto">moto</option>
  <option value="none">none</option>
</select>

<select id="two" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 2

1. Put ids on your selects to easily target them
2. In the handler, by default, disable the second select element
3. If the current val of the first select is car, then set disabled to false

$('#AutoType').change(function() {
  $('#Model').prop('disabled', true);
  if ($(this).val() == 'car') {
    $('#Model').prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="AutoType">
  <option value="car">car</option>
  <option value="truck">truck</option>
  <option value="moto">moto</option>
  <option value="none">none</option>
</select>

<select id="Model" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 3

You need to assign an id to you select element like:

<select id="my-input-id" disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

 document.getElementById('my-input-id').disabled = false;

Answer 4

Try this:

<form id="creation" name="creation" onchange="handleSelect()">
    <select name="select01" id="select01">>
      <option value="car">car</option>
      <option value="truck">truck</option>
      <option value="moto">moto</option>
      <option value="none">none</option>
    </select>

    <select name="select02" id="select02" disabled>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    </form>

    function handleSelect() {
     if (this.value == '01') {
         document.getElementById('select02').disabled = true;
     } else {
         document.getElementById('select02').disabled = false;
     }
 }

Answer 5

Do you want to simply use a frontend framework such as Angular or React.js or Ember?? It's much easier if you want to do something complicated.

A demo is as follows: http://jsfiddle.net/PxdSP/2244/

All you need to do is include angular.js in your website

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

You can then assign logic to the controller and decide what you want to do with the select or divs.