Change select box options upon selecting option in first select box

Question

In my javascript program I have created two select boxes and When the first option in the select box is selected,I want to display a selection of 3 images name in the images select box. When the second option is selected, I want to display a selection of corresponding 3 images name in the images box. For that I did below coding. but it's not working. can anyone help me to solve ?

code:

    <!DOCTYPE html>
    <html>
    <head>
     <title>selectbox</title>
     <style>
    
     div.event {
      padding-left: 40%;
      padding-top: 5%;
     }
    
     #mySelect{
      width: 60px;
      height: 50px;
      text-align: center;
     }
    </style>
    </head>
    <body>
    <form name="myForm">
     <div class="event">
      <select id="mySelect" multiple size="3" onchange="myFunction()">
       <option value="name" disabled="disabled">Name</option>
       <option value="animals">Animals</option>
       <option value="flowers">Flowers</option>
      </select>
    
      <select id="mySelect2" multiple size="4">
       <option disabled="disabled">Images</option>
      </select>
     </div>
    </form>
    
    <script>
    
     var selectbox2 = document.getElementById('mySelect2');
    
     function myFunction() {
      if (document.getElementById('mySelect').value == "Animals"){
       selectbox2.append('<option>Tiger</option>');
       selectbox2.append('<option>Lion</option>');
       selectbox2.append('<option>Bear</option>');
      } 
    
      else if (document.getElementById('mySelect').value == "Flowers"){
       selectbox2.append('<option>Rose</option>');
       selectbox2.append('<option>Lotus</option>');
       selectbox2.append('<option>Lily</option>');
      }
     }
    
    </script>
    
    </body>
    </html>

What does "not working" mean? Do you have any errors in the Console? — Scott Marcus, Oct 19 '17 at 20:41
Note that if you make this a code snippet we can actually run it here w/o having to go to JSFiddle/etc. — Dave Newton, Oct 19 '17 at 20:41
Unrelated, but it might just be easier to keep arrays of option value/text pairs and have a generic function to create the options instead of doing it all manually for each thing. — Dave Newton, Oct 19 '17 at 20:42

Scott Marcus · Accepted Answer · 2017-10-19T21:07:24.743

Your first select values are written in lower case, but your if tests are testing for capitals.

Second, the append() method is not standard and you should be using .appendChild() instead. But, with either one, you can't append strings. For strings, you must set the .innerHTML property.

If you want to use .append() or .appendChild(), you need to be appending a "DOM node", which can be created like this:

 var option = document.create("option");
 option.value = "something";

Lastly, don't use inline HTML event attributes (onclick, onchange, etc.). There are many reasons why. Instead do all your JavaScript work in a JavaScript area and follow modern standards for event handling (.addEventListener()).

<!DOCTYPE html>
    <html>
    <head>
     <title>selectbox</title>
     <style>   
     div.event {
      padding-left: 40%;
      padding-top: 5%;
     }
    
     #mySelect{
      width: 60px;
      height: 50px;
      text-align: center;
     }
    </style>
    </head>
    <body>
    <form name="myForm">
     <div class="event">
      <select id="mySelect" multiple size="3">
       <option value="name" disabled="disabled">Name</option>
       <option value="animals">Animals</option>
       <option value="flowers">Flowers</option>
      </select>
    
      <select id="mySelect2" multiple size="4">
       <option disabled="disabled">Images</option>
      </select>
     </div>
    </form>
    
    <script>
    
      // Get a reference to the first drop down:
      var selectbox1 = document.getElementById('mySelect');
      
      // Set up the event handling for the first select:
      selectbox1.addEventListener("change", myFunction);
    
     var selectbox2 = document.getElementById('mySelect2');
    
     function myFunction() {
      if (document.getElementById('mySelect').value == "animals"){
       selectbox2.innerHTML = '<option disabled="disabled">Images</option><option>Tiger</option><option>Lion</option><option>Bear</option>';
      } 
    
      else if (document.getElementById('mySelect').value == "flowers"){
       selectbox2.innerHTML = '<option disabled="disabled">Images</option><option>Rose</option><option>Lotus</option><option>Lily</option>';
      }
     }
    
    </script>
    
    </body>
    </html>

score 1 · Answer 2 · answered Oct 19 '17 at 21:17

This may help you. I've just added some simple feature.

<!DOCTYPE html>
<html>

<head>
  <title>selectbox</title>
  <style>
    div.event {
      padding-left: 40%;
      padding-top: 5%;
    }
    
    #mySelect {
      width: 60px;
      height: 50px;
      text-align: center;
    }
  </style>
</head>

<body>
  <form name="myForm">
    <div class="event">
      <select id="mySelect" multiple size="3" onchange="myFunction()">
       <option value="name" disabled="disabled">Name</option>
       <option value="animals">Animals</option>
       <option value="flowers">Flowers</option>
      </select>

      <select id="mySelect2" multiple size="4">
       <option disabled="disabled">Images</option>
      </select>
    </div>
  </form>

  <script>
    var selectbox2 = document.getElementById('mySelect2');

    function myFunction() {
      if (document.getElementById('mySelect').value == "animals") {
        selectbox2.options.length = 1;
        let tiger = document.createElement('option');
        tiger.text = 'Tiger';
        selectbox2.add(tiger);
        let lion = document.createElement('option');
        lion.text = 'Lion';
        selectbox2.add(lion);
        let bear = document.createElement('option');
        bear.text = 'Bear';
        selectbox2.add(bear);
      } else if (document.getElementById('mySelect').value == "flowers") {
        selectbox2.options.length = 1;
        let rose = document.createElement('option');
        rose.text = 'Rose';
        selectbox2.add(rose);
        let lotas = document.createElement('option');
        lotas.text = 'Lotas';
        selectbox2.add(lotas);
        let lilly = document.createElement('option');
        lilly.text = 'Lilly';
        selectbox2.add(lilly);
      }
    }
  </script>

</body>

</html>

Change select box options upon selecting option in first select box

2 Answers2