Menu
I have a simple drop down and I want to have it so that if the user selects Have a Baby the message changes to Have a Baby, but for any other selection. The message stays the same (nothing), but this isn't working. Can someone please help. Please play with my jsfiddle.
http://jsfiddle.net/Z9YJR/ Here is the html
<select id="leave"> <option value="5">Get Married</option> <option onchange="changeMessage()" value="100">Have a Baby</option> <option value="90">Adopt a Child</option> <option value="15">Retire</option> <option value="15">Military Leave</option> <option value="15">Medical Leave</option> </select> <div id="message"></div> Here is the js
function changeMessage() { document.getElementById("message").innerHTML = "Having a Baby!!"; } 
231
The HTML Select DropDownList has been assigned a jQuery OnChange event handler. When an item is selected in the HTML Select DropDownList, the jQuery OnChange event handler is executed within which the Text and Value of the selected item is fetched and displayed in JavaScript alert message box.
Yes. Add an onChange property to the first select, then use it to call a javascript function you have written elsewhere.
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.
Best procedure for cases like this would be, to add a common class to all the dropdowns for which you want to call the function on change. For ex: add 'trigger-change' class for all your required dropdowns. Then below bind event should work perfect for you. $('form select.
Something like this should do the trick
<select id="leave" onchange="leaveChange()"> <option value="5">Get Married</option> <option value="100">Have a Baby</option> <option value="90">Adopt a Child</option> <option value="15">Retire</option> <option value="15">Military Leave</option> <option value="15">Medical Leave</option> </select> <div id="message"></div> Javascript
function leaveChange() { if (document.getElementById("leave").value != "100"){ document.getElementById("message").innerHTML = "Common message"; } else{ document.getElementById("message").innerHTML = "Having a Baby!!"; } } jsFiddle Demo
A shorter version and more general could be
HTML
<select id="leave" onchange="leaveChange(this)"> <option value="5">Get Married</option> <option value="100">Have a Baby</option> <option value="90">Adopt a Child</option> <option value="15">Retire</option> <option value="15">Military Leave</option> <option value="15">Medical Leave</option> </select> Javascript
function leaveChange(control) { var msg = control.value == "100" ? "Having a Baby!!" : "Common message"; document.getElementById("message").innerHTML = msg; } It does not work because your script in JSFiddle is running inside it's own scope (see the "OnLoad" drop down on the left?).
One way around this is to bind your event handler in javascript (where it should be):
document.getElementById('optionID').onchange = function () { document.getElementById("message").innerHTML = "Having a Baby!!"; }; Another way is to modify your code for the fiddle environment and explicitly declare your function as global so it can be found by your inline event handler:
window.changeMessage() { document.getElementById("message").innerHTML = "Having a Baby!!"; };
22
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
