I have the next menu in HTML:
<select name="p1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
Now, I want to send it to my JS function:
function myFunc(menuValue){
//do something
}
How can I do it?
Something like this :
Javascript :
var selectObj = document.querySelector("#selectID"),
displayObj = document.querySelector(".display");
selectObj.onchange = function(evt){
myFunc(this.value);
}
function myFunc(menuValue){
displayObj.innerHTML = menuValue;
}
HTML :
<select id = "selectID" name="p1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<div class='display'></div>
So you want to get the value of the selected option onchange of option value right? You can try this way:-
<select name="p1" onchange="myfunc(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
function myFunc(menuValue){
alert(menuValue)
}
Here inside myFunc the context of `this would be the window. If you want to get the context inside the window as the dropdown itself you can use apply or call.
<select name="p1" onchange="myFunc.call(this);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
function myFunc(){
alert(this.value); //This will give the value again.
}
The select element in HTML offers an onchange event that fires if you select a new value (new = an option that was not selected).
<select name="p1" onchange="myFunc(option);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
function myFunc(option) {
// whatever you need to do
};
