javascript - Js dropdown depends of an other dropdown

Question

Hey guys simple question how can I display in the second dropdown information that depends of the first one.

Example. I have this:

var option = document.getElementById("second_dropdown").getElementsByTagName("option");
for (var j = 0; j < option.lenght; j++) {
  option[j].disabled = true;
}

<!-- DROPDOWN 1 -->
<select id="first_dropdown" name="first_d">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<!--  DROPDOWN 2 -->
<select id="second_dropdown" name="second_d">
  <optgroup label="1">
    <option value="100">blabla</option>
    <option value="101">blabla</option>
    <option value="102">blabla</option>
    </option>
    <optgroup label="2">
      <option value="103">blabla</option>
      <option value="104">blabla</option>
      <option value="105">blabla</option>
      </option>
      <optgroup label="3">
        <option value="106">blabla</option>
        <option value="107">blabla</option>
        <option value="108">blabla</option>
        </option>
        <select>

And I would like to display in dropdown 2 only the optgroup that has been selected in dropdown 1 ...

I really don't know about js so I hope that i explained it well and thanks in advance :)

But here I only disable all (and I want to disable only what's not selected in dropdown one) and I don't want to disable but I want to undisplay.

标签： javascripthtml

Answer 1

Loop through optgroup of second <select> and in loop check if value of first select is equal to label of optgroup remove disabled of it.

document.querySelector("#first_dropdown").onchange = function(){
  var val = this.value;
  document.querySelectorAll("#second_dropdown optgroup").forEach(function(ele){
    ele.disabled = ele.label != val
  });
};

<select id="first_dropdown" name="first_d">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<select id="second_dropdown" name="second_d">
  <optgroup label="1">
    <option value="100">blabla</option>
    <option value="101">blabla</option>
    <option value="102">blabla</option>
  </optgroup>
  <optgroup label="2">
    <option value="103">blabla</option>
    <option value="104">blabla</option>
    <option value="105">blabla</option>
  </optgroup>
  <optgroup label="3">
    <option value="106">blabla</option>
    <option value="107">blabla</option>
    <option value="108">blabla</option>
  </optgroup>
  <select>

Also you should change display property of element if you want to show/hide optgroup

document.querySelector("#first_dropdown").onchange = function(){
  var val = this.value;
  document.querySelectorAll("#second_dropdown optgroup").forEach(function(ele){
    ele.style.display = ele.label==val ? "block" : "none";
  });
};

Also you can do this work simplify using jquery

$("#first_dropdown").change(function(e){
  $("#second_dropdown optgroup").css("display", function(){
    return this.label==e.target.value ? "block" : "none";
  });
});