CODEWITHSUNDEEP
javascripthtml
pari
pari

Reputation: 89

Change select box options upon selecting option in first select box

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>

Upvotes: 0

Views: 297

Answers (2)

Sifat Haque
Sifat Haque

Reputation: 6057

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>

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65806

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>

Upvotes: 1

Related Questions