onChange and onSelect in DropDownList

Question

I have a DropDownList that asks the user if he want to join the club   Do you want to join the club Yes No   Under this list there is another list that is set to disabled as a default  This list has the departments of the club  This list will not be enabled until the user chooses Yes   I built the following code but the problem that I couldn t solve is let s assume the user chooses Yes then he changes his decision so he will choose No again  In this case the list of the departments still enabled  I want it to be disabled when he chooses No again    lt html gt       lt head gt           lt script type  text javascript  gt              function disable                                 document getElementById  mySelect1   disabled true                            function enable                                 document getElementById  mySelect1   disabled false                         lt  script gt       lt  head gt       lt body gt           lt form gt               lt select id  mySelect  onChange  enable     gt                   lt option onSelect  disable     gt No lt  option gt                   lt option onSelect  enable     gt Yes lt  option gt               lt  select gt               lt select id  mySelect1  disabled  disabled   gt                   lt option gt Dep1 lt  option gt                   lt option gt Dep2 lt  option gt                   lt option gt Dep3 lt  option gt                   lt option gt Dep4 lt  option gt               lt  select gt           lt  form gt       lt  body gt   lt  html gt    I thought that onSelect  disable     would solve the problem but it still doesn t work   Thanks

User · Accepted Answer

I d do it like this jsFiddle example   JavaScript   function check elem        document getElementById  mySelect1   disabled    elem selectedIndex      HTML    lt form gt   lt select id  mySelect  onChange  check this    gt   lt option gt No lt  option gt   lt option gt Yes lt  option gt   lt  select gt    lt select id  mySelect1  disabled  disabled   gt   lt option gt Dep1 lt  option gt   lt option gt Dep2 lt  option gt   lt option gt Dep3 lt  option gt   lt option gt Dep4 lt  option gt   lt  select gt   lt  form gt

User · Answer

To make a robust form  have it load in a useful state and use script to enhance its behaviour  In the following  the select has been replaced by radio buttons  makes life much easier for the user     The  yes  option is checked by default and the select is enabled  If the user checks either radio button  the select is enabled or disabled accordingly     lt form onclick  this mySelect1 disabled   this becomeMember 1  checked        gt     lt input type  radio  name  becomeMember  checked gt Yes lt br gt     lt input type  radio  name  becomeMember  gt No lt br gt      lt select id  mySelect1  gt       lt option gt Dep1      lt option gt Dep2      lt option gt Dep3      lt option gt Dep4    lt  select gt         lt  form gt

User · Answer

hmm  why don t you use onClick     lt select id  mySelect  onChange  enable     gt      lt option onClick  disable     gt No lt  option gt      lt option onClick  enable     gt Yes lt  option gt   lt  select gt

User · Answer

I bet the onchange is getting fired after the onselect  essentially re-enabling the select   I d recommend you implement only the onchange  inspect which option has been selected  and enable or disabled based on that   To get the value of the selected option use   document getElementById  mySelect   options document getElementById  mySelect   selectedIndex  value   Which will yield    nothing since you haven t specified a value for each option         lt select id  mySelect  onChange  enable     gt   lt option onSelect  disable     value  no  gt No lt  option gt   lt option onSelect  enable     value  yes  gt Yes lt  option gt   lt  select gt    Now it will yield  yes  or  no

User · Answer

Simply  amp  Easy   JavaScript code    function JoinedOrNot        var cat   document getElementById  mySelect        if cat value     yes            document getElementById  mySelect1   disabled   false       else          document getElementById  mySelect1   disabled   true            just add in this line  onChange  JoinedOrNot        lt select id  mySelect  onchange  JoinedOrNot    gt   it s work fine

[javascript] onChange and onSelect in DropDownList

Examples related to javascript

Examples related to html

Examples related to onchange