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

Question

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 depending on the OPTION selected in my Source drop-down   Source    lt select id  source  name  source  gt        lt option gt MANUAL lt  option gt        lt option gt ONLINE lt  option gt   lt  select gt    Status    lt select id  status  name  status  gt    lt  select gt    Options  - If Source is MANUAL  then Status is OPEN or DELIVERED - If Source is ONLINE  then Status is OPEN or DELIVERED or SHIPPED  My non-working attempt                lt script gt                document  ready function                  var option   document getElementById  status   options              if  document getElementById  source   value     MANUAL                         status   append   lt option gt OPEN lt  option gt                         status   append   lt option gt DELIVERED lt  option gt                                   if  document getElementById  source   value     ONLINE                         status   append   lt option gt OPEN lt  option gt                         status   append   lt option gt DELIVERED lt  option gt                         status   append   lt option gt SHIPPED lt  option gt                                                    lt  script gt

User · Answer

function dropdownlist listindex                 document getElementById  ddlCity   options length   0           switch  listindex                           case  Karnataka                        document getElementById  ddlCity   options 0    new Option  --select--                             document getElementById  ddlCity   options 1    new Option  Dharawad    Dharawad                         document getElementById  ddlCity   options 2    new Option  Haveri    Haveri                         document getElementById  ddlCity   options 3    new Option  Belgum    Belgum                         document getElementById  ddlCity   options 4    new Option  Bijapur    Bijapur                      break                case  Tamilnadu                    document getElementById  ddlCity   options 0    new Option  --select--                         document getElementById  ddlCity   options 1    new Option  dgdf    dgdf                     document getElementById  ddlCity   options 2    new Option  gffd    gffd                       break                                                                                            State                                       --Select--                     Karnataka                     Tamilnadu                     Andra pradesh                     Telngana                                                               lt div gt           lt p gt                lt label id  lblCt  gt               lt span class  red  gt   lt  span gt                  City  lt  label gt               lt select id  ddlCity  gt                  lt  --  lt option gt --Select-- lt  option gt                   lt option value  1  gt Dharawad lt  option gt                   lt option value  2  gt Belgum lt  option gt                   lt option value  3  gt Bagalkot lt  option gt                   lt option value  4  gt Haveri lt  option gt                   lt option gt Hydrabadh lt  option gt                   lt option gt Vijat vada lt  option gt -- gt               lt  select gt               lt label id  lblCity  gt  lt  label gt           lt  p gt       lt  div gt

User · Answer

I am posting this answer because in this way you will never need any plugin like jQuery and any other  This has the solution by simple javascript    lt html gt       lt head gt       lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt       lt script language  javascript  type  text javascript  gt      function dynamicdropdown listindex                switch  listindex                    case  manual                document getElementById  status   options 0  new Option  Select status                   document getElementById  status   options 1  new Option  OPEN   open                document getElementById  status   options 2  new Option  DELIVERED   delivered                break          case  online                document getElementById  status   options 0  new Option  Select status                   document getElementById  status   options 1  new Option  OPEN   open                document getElementById  status   options 2  new Option  DELIVERED   delivered                document getElementById  status   options 3  new Option  SHIPPED   shipped                break                    return true             lt  script gt       lt  head gt       lt title gt Dynamic Drop Down List lt  title gt       lt body gt       lt div class  category div  id  category div  gt Source           lt select id  source  name  source  onchange  javascript  dynamicdropdown this options this selectedIndex  value    gt           lt option value    gt Select source lt  option gt           lt option value  manual  gt MANUAL lt  option gt           lt option value  online  gt ONLINE lt  option gt           lt  select gt       lt  div gt       lt div class  sub category div  id  sub category div  gt Status           lt script type  text javascript  language  JavaScript  gt          document write   lt select name  status  id  status  gt  lt option value    gt Select status lt  option gt  lt  select gt             lt  script gt           lt noscript gt           lt select id  status  name  status  gt               lt option value  open  gt OPEN lt  option gt               lt option value  delivered  gt DELIVERED lt  option gt           lt  select gt           lt  noscript gt       lt  div gt       lt  body gt   lt  html gt    For more details  I mean to make dynamic and more dependency please take a look at my article  create dynamic drop-down list

User · Answer

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   lt select id  quot continents quot  gt    lt option value   0 gt All lt  option gt       lt option value   1 gt Asia lt  option gt    lt option value   2 gt Europe lt  option gt    lt option value   3 gt Africa lt  option gt   lt  select gt    lt select id  quot selectcountries quot  gt  lt  select gt   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 gt b   1   a lt b   -1   0        sort method       Edit 2021  or use data-attributes  something like   x000D   x000D  document addEventListener  change   checkSelect    function checkSelect evt      const origin   evt target     if  origin dataset dependentSelector        const selectedOptFrom   origin querySelector  option checked          dataset dependentOpt     n a       const addRemove   optData   gt   optData            selectedOptFrom           add     remove       document querySelectorAll    origin dataset dependentSelector  option          forEach  opt   gt           opt classList addRemove opt dataset fromDependent    display            x000D   data-from-dependent      display  none      data-from-dependent  display     display  initial    x000D   lt select id  source  name  source  data-dependent-selector   status  gt     lt option gt MANUAL lt  option gt     lt option data-dependent-opt  ONLINE  gt ONLINE lt  option gt     lt option data-dependent-opt  UNKNOWN  gt UNKNOWN lt  option gt   lt  select gt    lt select id  status  name  status  gt     lt option gt OPEN lt  option gt     lt option gt DELIVERED lt  option gt     lt option data-from-dependent  ONLINE  gt SHIPPED lt  option gt     lt option data-from-dependent  UNKNOWN  gt SHOULD SELECT lt  option gt     lt option data-from-dependent  UNKNOWN  gt MAYBE IN TRANSIT lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

for this  I have noticed that it far better to show and hide the  tags instead of adding and removing them for the DOM  It performs better that way

User · Answer

Try something like this     jsfiddle demo HTML  lt  -- Source  -- gt   lt select id  quot source quot  name  quot source quot  gt        lt option gt MANUAL lt  option gt        lt option gt ONLINE lt  option gt   lt  select gt    lt  -- Status  -- gt   lt select id  quot status quot  name  quot status quot  gt       lt option gt OPEN lt  option gt       lt option gt DELIVERED lt  option gt   lt  select gt   JS   document  ready function              quot  source quot   change function              var el     this           if  el val        quot ONLINE quot                    quot  status quot   append  quot  lt option gt SHIPPED lt  option gt  quot              else if  el val        quot MANUAL quot                    quot  status option last-child quot   remove

User · Answer

You re better off making two selects and showing one while hiding the other   It s easier  and adding options to selects with your method will not work in IE8  if you care

User · Answer

I hope the following code will help or solve your problem or you think not that understandable visit http   phppot com jquery jquery-dependent-dropdown-list-countries-and-states    HTML DYNAMIC DEPENDENT SELECT   lt div class  frmDronpDown  gt   lt div class  row  gt       lt label gt Country  lt  label gt  lt br  gt       lt select name  country  id  country-list  class  demoInputBox  onChange  getState this value    gt       lt option value    gt Select Country lt  option gt       lt  php     foreach  results as  country          gt       lt option value   lt  php echo  country  id      gt   gt  lt  php echo  country  name      gt  lt  option gt       lt  php             gt       lt  select gt   lt  div gt   lt div class  row  gt       lt label gt State  lt  label gt  lt br  gt       lt select name  state  id  state-list  class  demoInputBox  gt       lt option value    gt Select State lt  option gt       lt  select gt   lt  div gt      GETTING STATES VIA AJAX   lt script gt  function getState val      ajax   type   POST   url   get state php   data  country id   val  success  function data           state-list   html data           lt  script gt    READ STATE DATABASE USING PHP   lt  php require once  dbcontroller php     db handle   new DBController   if  empty   POST  country id        query   SELECT   FROM states WHERE countryID          POST  country id           results    db handle- gt runQuery  query     gt   lt option value    gt Select State lt  option gt  lt  php foreach  results as  state      gt   lt option value   lt  php echo  state  id      gt   gt  lt  php echo  state  name      gt  lt  option gt  lt  php       gt

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

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to forms

Examples related to drop-down-menu