Menu
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.
<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 that onSelect="disable();" would solve the problem but it still doesn't work.
Thanks
728
The onChange attribute of <select> lets you dynamically change something on screen, without reloading the page. For example, your can use it to display a particular image, depending on the user's selection.
To handle the onChange event on a select element in React: Set the onChange prop on the select element. Keep the value of the selected option in a state variable. Every time the user changes the selected option, update the state variable.
How to get the values from multiple dropdowns and then trigger a single onchange event. Use a standard jQuery selector. Get all select values. Get the selects with the my-select class.
Simply & 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()"] : <select id="mySelect" onchange="JoinedOrNot()">
it's work fine ;)
53
I'd do it like this jsFiddle example.
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>
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 .. :(
<select id="mySelect" onChange="enable();">
<option onSelect="disable();" value="no">No</option>
<option onSelect="enable();" value="yes">Yes</option>
</select>
Now it will yield "yes" or "no"
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
