Drop-down box dependent on the option selected in another drop-down box

后端未结

关注

 7  1791

半阙折子戏 2020-11-29 05:55

I have 2 different SELECT OPTION in a form.

The first one is Source, the second one is Status. I would like to have different OPTIONS in my Status drop-down list dep

7条回答

野性不改 (楼主)

2020-11-29 06:56

In this jsfiddle you'll find a solution I deviced. The idea is to have a selector pair in html and use (plain) javascript to filter the options in the dependent selector, based on the selected option of the first. For example:

Uses (in the jsFiddle)

 MAIN.createRelatedSelector
     ( document.querySelector('#continents')           // from select element
      ,document.querySelector('#selectcountries')      // to select element
      ,{                                               // values object 
        Asia: ['China','Japan','North Korea',
               'South Korea','India','Malaysia',
               'Uzbekistan'],
        Europe: ['France','Belgium','Spain','Netherlands','Sweden','Germany'],
        Africa: ['Mali','Namibia','Botswana','Zimbabwe','Burkina Faso','Burundi']
      }
      ,function(a,b){return a>b ? 1 : a