Populate one dropdown based on selection in another

Question

I need to change the contents of dropdown B based on the selection in dropdown A using javascript   There are no db queries involved--I know beforehand what the contents of B should be given the choice in A   I have found some examples using AJAX  but since there is no db query involved that s not necessary   Can anyone point me to some example code for how to do this

User · Accepted Answer

x000D   x000D  function configureDropDownLists ddl1  ddl2    x000D    var colours     Black    White    Blue    x000D    var shapes     Square    Circle    Triangle    x000D    var names     John    David    Sarah    x000D   x000D    switch  ddl1 value    x000D      case  Colours   x000D        ddl2 options length   0  x000D        for  i   0  i  lt  colours length  i      x000D          createOption ddl2  colours i   colours i    x000D          x000D        break  x000D      case  Shapes   x000D        ddl2 options length   0  x000D        for  i   0  i  lt  shapes length  i      x000D          createOption ddl2  shapes i   shapes i    x000D          x000D        break  x000D      case  Names   x000D        ddl2 options length   0  x000D        for  i   0  i  lt  names length  i      x000D          createOption ddl2  names i   names i    x000D          x000D        break  x000D      default  x000D        ddl2 options length   0  x000D        break  x000D      x000D   x000D    x000D   x000D  function createOption ddl  text  value    x000D    var opt   document createElement  option    x000D    opt value   value  x000D    opt text   text  x000D    ddl options add opt   x000D    x000D   lt select id  ddl  onchange  configureDropDownLists this document getElementById  ddl2     gt  x000D     lt option value    gt  lt  option gt  x000D     lt option value  Colours  gt Colours lt  option gt  x000D     lt option value  Shapes  gt Shapes lt  option gt  x000D     lt option value  Names  gt Names lt  option gt  x000D   lt  select gt  x000D   x000D   lt select id  ddl2  gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Could you please have a look at  http   jsfiddle net 4Zw3M 1    Basically  the data is stored in an Array and the options are added accordingly  I think the code says more than a thousand words   var data        The data       ten              eleven   twelve                twenty              twentyone    twentytwo              a       a       The dropdowns  b       b     for var i   0  i  lt  data length  i          var first   data i  0        a append     lt option gt        Add options        attr  value  first          data  sel   i          text first        a change function         var index     this  children  option selected   data  sel        var second   data index  1      The second-choice data       b html         Clear existing options in second dropdown      for var j   0  j  lt  second length  j               b append     lt option gt        Add options            attr  value  second j               data  sel   j              text second j              change       Trigger once to add options at load of first choice

User · Answer

Setup mine within a closure and with straight JavaScript  explanation provided in comments   x000D   x000D   function     x000D   x000D      setup an object fully of arrays x000D      alternativly it could be something like x000D        yes    value sweet  text Sweet         x000D      so you could set the label of the option tag something different than the name x000D    var bOptions     x000D       yes     sweet    wohoo    yay    x000D       no     you suck     common son   x000D       x000D   x000D    var A   document getElementById  A    x000D    var B   document getElementById  B    x000D   x000D      on change is a good event for this because you are guarenteed the value is different x000D    A onchange   function     x000D        clear out B x000D      B length   0  x000D        get the selected value from A x000D      var  val   this options this selectedIndex  value  x000D        loop through bOption at the selected value x000D      for  var i in bOptions  val     x000D          create option tag x000D        var op   document createElement  option    x000D          set its value x000D        op value   bOptions  val  i   x000D          set the display label x000D        op text   bOptions  val  i   x000D          append it to B x000D        B appendChild op   x000D        x000D       x000D      fire this to update B on load x000D    A onchange    x000D   x000D        x000D   lt select id  A  name  A  gt  x000D     lt option value  yes  selected  selected  gt yes x000D     lt option value  no  gt  no x000D   lt  select gt  x000D   lt select id  B  name  B  gt  x000D   lt  select gt  x000D   x000D   x000D

[javascript] Populate one dropdown based on selection in another

Examples related to javascript

Examples related to html