CODEWITHSUNDEEP
javascripthtml-select
duplex
duplex

Reputation: 17

multiple <option> connected with each other

Hi hopefully you can help me with my question.

I'm building a option box that I want to be connected to another option box with specific options for the options in the first one. whoa sorry if it sounds complicated.

it currently looks like this:

 <select id="fonts">
 <option value="Arial"></option>
 <option value="Helvetica"></option>
 <option value="Times"></option>
 </select>

and if lets say you pick the first option "Arial" the second option box would have the following options:

 <select id="weights">
 <option value="Normal"></option>
 <option value="Bold"></option>
 <option value="Italic"></option>
 </select>

and if you would pick "Helvetica" it would maybe only have one option let say "italic".

 <select id="weights">
 <option value="Italic"></option>
 </select>

any help would be much appreciated! Xx

Upvotes: 2

Views: 463

Answers (3)

ajitksharma
ajitksharma

Reputation: 2019

You can try this.

Similarly as per your requirement you can add more components.

However options are harcoded rightnow, you can use it with dynamic values too.

Also as mentioned by BadHorsie, you can go for those plugins if you have multiple select to be chained.

function update()
{
var sel = document.getElementById("fonts");
var value = sel.options[sel.selectedIndex].value;
 
  if(value=="Arial"){
    document.getElementById("weights").innerHTML = "";
    var newSelect = document.createElement("select");
    newSelect.id = "weightsSelect";
     newSelect[newSelect.length] = new Option("Normal", "Normal", false, false);    
     newSelect[newSelect.length] = new Option("Bold", "Bold", false, false);
     newSelect[newSelect.length] = new Option("Italic", "Italic", false, false);
     document.getElementById('weights').appendChild(newSelect);
     }
  else if(value=="Helvetica")
     {
      document.getElementById("weights").innerHTML = "";
      var newSelect = document.createElement("select");
    
     newSelect[newSelect.length] = new Option("Italic", "Italic", false, false);    
     document.getElementById('weights').appendChild(newSelect);
     }
  else if(value=="Times"){
   
    }
  
}
<select id="fonts" onchange="update(this)">
 <option value="Arial">Arial</option>
 <option value="Helvetica">Helvetica</option>
 <option value="Times">Times</option>
 </select>
<div id="weights"></div>

Upvotes: 0

BadHorsie
BadHorsie

Reputation: 14544

This is called chaining select menus.

There are many plugins which can do this for you if your system is fairly straightforward.

e.g. http://www.appelsiini.net/projects/chained

Upvotes: 1

WhiteLine
WhiteLine

Reputation: 1991

You can use jQuery

Listen the change event of a select

$("#myselect1").change(function () {

});

In the change event , you can do something like this

$('#myselect2').append($('<option>', {
    value: 1,
    text: 'My option'
}));

In this way you know when the first select is used, and when you select an option, you can, depending on your criteria, change the second select

Upvotes: 0

Related Questions