Geek Answers Handbook

OnChange and on Select DropDownList

I have a DropDownList that asks the user if he wants to join the club:

Do you want to join the club Yes No

There is another list in this list, which is disabled by default. There are club departments on this list. This list will not be included until the user selects "Yes."

I built the following code, but a problem that I could not solve suggests that the user selects Yes, then he changes his mind, so he will not select "No" again. In this case, the list of departments is still included. I want it to be disabled when it again selects "No".

 <html> <head> <script type="text/javascript"> function disable() { document.getElementById("mySelect1").disabled=true; } function enable() { document.getElementById("mySelect1").disabled=false; } </script> </head> <body> <form> <select id="mySelect" onChange="enable();"> <option onSelect="disable();">No</option> <option onSelect="enable();">Yes</option> </select> <select id="mySelect1" disabled="disabled" > <option>Dep1</option> <option>Dep2</option> <option>Dep3</option> <option>Dep4</option> </select> </form> </body> </html>

I thought onSelect="disable();" will solve the problem, but still does not work.

thanks

+7
source share
5 answers

I would do this as an example of jsFiddle .

JavaScript:

 function check(elem) { document.getElementById('mySelect1').disabled = !elem.selectedIndex; }

HTML:

 <form> <select id="mySelect" onChange="check(this);"> <option>No</option> <option>Yes</option> </select> <select id="mySelect1" disabled="disabled" > <option>Dep1</option> <option>Dep2</option> <option>Dep3</option> <option>Dep4</option> </select> </form>
+14
source

I am sure that onchange starts after onselect , essentially activating the selection again.

I would recommend that you only implement onchange , check which option was selected, and enable or disable based on this.

To get the value of the selected option, use:

 document.getElementById("mySelect").options[document.getElementById("mySelect").selectedIndex].value

Which will not give anything, since you did not specify a value for each option .: (

 <select id="mySelect" onChange="enable();"> <option onSelect="disable();" value="no">No</option> <option onSelect="enable();" value="yes">Yes</option> </select>

Now it will give "yes" or "no"

+3
source

To create a robust form, load it in a healthy state and use a script to improve its behavior. Subsequently, the choice was replaced by switches (makes life much easier for the user).

The yes option is checked by default and the selection is enabled. If the user checks any radio button, the selection is turned on or off accordingly.

 <form onclick="this.mySelect1.disabled = this.becomeMember[1].checked;" ... > <input type="radio" name="becomeMember" checked>Yes<br> <input type="radio" name="becomeMember">No<br> <select id="mySelect1"> <option>Dep1 <option>Dep2 <option>Dep3 <option>Dep4 </select> ... </form>
+3
source

Simple and Simple: 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 [onChange = "RegisteredOrNot ()"] to this line: <select id="mySelect" onchange="JoinedOrNot()">

it works great;)

+2
source

hmm. why don't you use onClick()

 <select id="mySelect" onChange="enable();"> <option onClick="disable();">No</option> <option onClick="enable();">Yes</option> </select>
0
source

More articles:


All Articles