CODEWITHSUNDEEP
javascripthtml
APoorDev
APoorDev

Reputation: 181

Js dropdown depends of an other dropdown

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.

Upvotes: 0

Views: 52

Answers (2)

Mamun
Mamun

Reputation: 68923

You can try the following way:

var firstDD = document.getElementById('first_dropdown');
firstDD.addEventListener('change',changeDD);
function changeDD(){
  var fValue = firstDD.value;
  document.querySelectorAll('#second_dropdown > optgroup').forEach(function(el){
    if(el.label != fValue )
      el.style.display='none';
    else
      el.style.display='block';
  });
  document.querySelector('#second_dropdown').value = "";
}
changeDD(firstDD);
<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 21</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>

Upvotes: 1

Mohammad
Mohammad

Reputation: 21489

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

Upvotes: 1

Related Questions