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

问题

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?

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

回答2:

Put ids on your selects to easily target them
In the handler, by default, disable the second select element
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>

回答3:

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

回答4:

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;

回答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.

来源：https://stackoverflow.com/questions/30867241/enable-a-disabled-select-when-choose-a-value-in-another-select-tag

标签

javascript

html

disabled-input