CODEWITHSUNDEEP
javascripthtml
user2095748
user2095748

Reputation: 267

How to remove all options of select tag and assign a new list of items to select options in javascript?

<select id="property" onchange="change()">
     <option>1</option>
     <option>2</option>
</select>
<select id="value">
     <option>a</option>
     <option>b</option>
     <option>c</option> 
 </select>

change() function in javascript should remove existing options in "value" and assign new list of entries like (x,y,z)

Upvotes: 0

Views: 1046

Answers (4)

Jack jdeoel
Jack jdeoel

Reputation: 4584

if u use onchange(), u must write your js code in your html.but don't use javascript code in html file.So better try by jquery.

$(document).ready(function(){
  $('#property').on("change",function(){    
  var new_option ="<option>x</option><option>y</option><option>z</option>";     
  $('#value').empty().append(new_option);
  });
});

Upvotes: 0

user5324028
user5324028

Reputation:

This is the most dynamic script with no limitations.

The below script will help you if you have any number of options in first select based on which second select box would populate.

CODE :

 var dynamicArray = {
   1: ["a", "b", "c"],
   2: ["p", "q", "r"],
   3: ["u", "v", "w", "x", "y", "z"],
   4: ["l", "m", "n", "p", "q", "r", "s", "t", "u"]
 }

 function makeSubmenu(value) {
   if (value.length == 0) document.getElementById("dynamicSelect").innerHTML = "<option></option>";
   else {
     var populateOptions = "";
     for (secondOpt in dynamicArray[value]) {
       populateOptions += "<option>" + dynamicArray[value][secondOpt] + "</option>";
     }
     document.getElementById("dynamicSelect").innerHTML = populateOptions;
   }
 }

 function resetSelection() {
   document.getElementById("mainSelect").selectedIndex = 0;
   document.getElementById("dynamicSelect").selectedIndex = 0;
 }
<body onload="resetSelection()">
  <select id="mainSelect" onchange="makeSubmenu(this.value)">
    <option disabled>Select Here...</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <select id="dynamicSelect" size="1">
    <option></option>
  </select>
</body>

What you need to do is just give same array elements for respective options. Here as you can see array named dynamicArray holds your select box 1, 2, 3, 4 width there respective value. This 1, 2, 3, 4 is nothing but your content of first select box that in your HTML like <option>1</option> <option>2</option> <option>3</option> <option>4</option>.

So if you change this(1, 2, 3, 4) in HTML do not forget to change in array too.

Upvotes: 1

Soubhik Mondal
Soubhik Mondal

Reputation: 2666

Here's a JSFiddle for this problem.

What I did was add this inside change():

elem = document.getElementById("value");

//FOR DELETING
length = elem.children.length;
for(var i = 0; i < length ; i++)
    elem.removeChild(elem.children[0]);

//FOR ADDING
var value;
for(var i = 0; i < 3 ; i++) {
    switch(i){
        case 0:
            value = "x";
            break;
        case 1:
            value = "y";
            break;
        case 2:
            value = "z";
            break;
    }        
    var option = document.createElement("option");
    option.appendChild(document.createTextNode(value));
    elem.appendChild(option);
}

Upvotes: 0

Lal
Lal

Reputation: 14810

See this fiddle

You can use innerHTML to change the values in a select box. Try the below code.

JS

function change() {
    document.getElementById('value').innerHTML = "<option>x</option>
       <option>y</option>
       <option>z</option>";
}

If you want the options populated according to the value selected in the first dropdown, please see this fiddle

Upvotes: 0

Related Questions