CODEWITHSUNDEEP
javascripthtml
Ahmad Reza
Ahmad Reza

Reputation: 913

html select element that its options depends on another select

I have two select element and I want to show some options in second select based on what user choose at first select. consider first select have two options : a , b ... if user choose 'a' from first select : the second select optiones should be -> c , d ... and if user choose 'b' from first select : the second select optiones should be : e , f ... I have done some coding but the problem is at the start when user doesnt choose any option from first select the second select is always empty(it should show c , d)

<!DOCTYPE html>
<html>
<body>
    <select id="s1" required> 
        <option value="a">a</option>
        <option value="b">b</option> 
    </select>
    <select id="s2" required > </select>
    <script>
        document.getElementById("s1").onchange = function() {
            document.getElementById('s2').disabled = false; //enabling s2 select
            document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
            var opt0 = document.createElement('option');
            var opt1 = document.createElement('option');
            if (this.value == 'a') {
                opt0.textContent = "c";
                opt1.textContent = "d";
                document.getElementById('s2').appendChild(opt0);
                document.getElementById('s2').appendChild(opt1);
            } else if (this.value == 'b') {
                opt0.textContent = "e";
                opt1.textContent = "f";
                document.getElementById('s2').appendChild(opt0);
                document.getElementById('s2').appendChild(opt1);
            }
        };
    </script>
</body>
</html>

Upvotes: 0

Views: 3171

Answers (5)

Sonu Mittal
Sonu Mittal

Reputation: 33

This code is based on JavaScript (No need for jQuery) change Id name and value (x=="desire_value") according to your code

  function myFunction() {
    var x = document.getElementById("select1").value;
    if (x == "3") document.getElementById("select2").style.display = "block";
    else document.getElementById("select2").style.display = "none";
}
<select id="select1" onchange="myFunction()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select id="select2" style="display: none;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Upvotes: 1

Jon P
Jon P

Reputation: 19792

One approach to contemplate is populating the dependant dropdowns with all values and use a data attribute for the parent-child relationship. Javascript then clones and removes the options for later insertion.

The functional javascript is now very lean and the dependency relationships are maintained in the DOM.

var s2Clone;

// Doesn't work in older IEs
//CLone the Dependant drop down and hide
document.addEventListener('DOMContentLoaded', function(){ 
   s2Clone = document.getElementById("s2").cloneNode(true);
   document.getElementById("s2").innerHTML = "";   
}, false);

document.getElementById("s1").onchange = function() {
  var selected = this.value;
  
  //Get the nodes with a parent attribute of the selected data
  var optionsToInsert = s2Clone.querySelectorAll("[data-parent='" + selected +"']");
  //clear existing
  var s2 = document.getElementById("s2");
  s2.innerHTML = "";
  
  //Add The new  options.
  for(i = 0; i < optionsToInsert.length; i++)
  {
    s2.appendChild(optionsToInsert[i]);
  }
  
}
<select id="s1" required> 
    <option value="">Please select</option>
    <option value="a">a</option>
    <option value="b">b</option> 
</select>
<select id="s2" required >
  <option value="a1" data-parent="a">a - 1</option>
  <option value="a2" data-parent="a">a - 2</option>
  <option value="a3" data-parent="a">a - 3</option>
  <option value="b1" data-parent="b">b - 1</option>
  <option value="b2" data-parent="b">b - 2</option>
  <option value="b3" data-parent="b">b - 3</option>
</select>

Upvotes: 0

Slai
Slai

Reputation: 22876

If you can save the option values in a lookup object (or JSON):

function setOptions(select, values) {
  for (var i = select.length = values.length; i--; )
    select[i].innerText = values[i]
}
function value(select) { return select.value || select[0].value } // 1st item by default

var data = { 1: { 1.1: [1.11, 1.12], 1.2: [1.21, 1.22] }, 
             2: { 2.1: [2.11, 2.12], 2.2: [2.21, 2.22], 2.3: [2.31, 2.32, 2.33] } }

s2.onchange = function() { setOptions(s3, data[value(s1)][value(s2)]) }
s1.onchange = function() { setOptions(s2, Object.keys(data[value(s1)])); s2.onchange() }

setOptions(s1, Object.keys(data)); s1.onchange(); // fill the options
<select id=s1 required size=3></select>
<select id=s2 required size=3></select>
<select id=s3 required size=3></select>

Upvotes: 1

Mamun
Mamun

Reputation: 68943

You have to write the functionality outside of onchange(). Try the following:

document.getElementById("s1").onchange = function() {
    document.getElementById('s2').disabled = false; //enabling s2 select
    document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
    var opt0 = document.createElement('option');
    var opt1 = document.createElement('option');
    if (this.value == 'a') {
        opt0.textContent = "c";
        opt1.textContent = "d";
        document.getElementById('s2').appendChild(opt0);
        document.getElementById('s2').appendChild(opt1);
    } else if (this.value == 'b') {
        opt0.textContent = "e";
        opt1.textContent = "f";
        document.getElementById('s2').appendChild(opt0);
        document.getElementById('s2').appendChild(opt1);
    }
};

let element = document.getElementById("s1");
let selOption = element.options[element.selectedIndex].value;

if(selOption == 'a'){
  var opt0 = document.createElement('option');
  var opt1 = document.createElement('option');
  opt0.textContent = "c";
  opt1.textContent = "d";
  document.getElementById('s2').appendChild(opt0);
  document.getElementById('s2').appendChild(opt1);
}
<select id="s1" required> 
    <option value="a">a</option>
    <option value="b">b</option> 
</select>
<select id="s2" required > </select>

Upvotes: 0

Md Monjur Ul Hasan
Md Monjur Ul Hasan

Reputation: 1791

Why don't you just put that hard coded...

<!DOCTYPE html>
<html>
<body>
     <select id="s1" required> 
        <option value="a">a</option>
        <option value="b">b</option> 
    </select>
    <select id="s2" required > 
        <option value="c">c</option>
        <option value="d">d</option> 
    </select>
    <script>
        document.getElementById("s1").onchange = function() {
        document.getElementById('s2').disabled = false; //enabling s2 select
        document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
        var opt0 = document.createElement('option');
        var opt1 = document.createElement('option');
        if (this.value == 'a') {
            opt0.textContent = "c";
            opt1.textContent = "d";
            document.getElementById('s2').appendChild(opt0);
            document.getElementById('s2').appendChild(opt1);
        } else if (this.value == 'b') {
            opt0.textContent = "e";
            opt1.textContent = "f";
            document.getElementById('s2').appendChild(opt0);
            document.getElementById('s2').appendChild(opt1);
        }
    };
  </script>
</body>
</html>

Upvotes: 0

Related Questions