How to use onClick() or onSelect() with option tag? Below is my code in which I tried to implement that, but it is not working as expected.
Note: where listCustomer domain object list getting in JSP page.
<td align="right"> <select name="singleSelect" "> <c:forEach var="Customer" items="${listCustomer}" > <option value="" onClick="javascript:onSelect(this);> <c:out value="${Customer}" /></option> </c:forEach> </select> </td> How do I modify it to detect that an option is selected?
Neither the onSelect() nor onClick() events are supported by the <option> tag. The former refers to selecting text (i.e. by clicking + dragging across a text field) so can only be used with the <text> and <textarea> tags.
The onClick() event can be used with <select> tags – however, you probably are looking for functionality where it would be best to use the onChange() event, not onClick() . Furthermore, by the look of your <c:...> tags, you are also trying to use JSP syntax in a plain HTML document.
Neither the onSelect() nor onClick() events are supported by the <option> tag. The former refers to selecting text (i.e. by clicking + dragging across a text field) so can only be used with the <text> and <textarea> tags. The onClick() event can be used with <select> tags - however, you probably are looking for functionality where it would be best to use the onChange() event, not onClick().
Furthermore, by the look of your <c:...> tags, you are also trying to use JSP syntax in a plain HTML document. That's just... incorrect.
In response to your comment to this answer - I can barely understand it. However, it sounds like what you want to do is get the value of the <option> tag that the user has just selected whenever they select one. In that case, you want to have something like:
<html> <head> <script type="text/javascript"> function changeFunc() { var selectBox = document.getElementById("selectBox"); var selectedValue = selectBox.options[selectBox.selectedIndex].value; alert(selectedValue); } </script> </head> <body> <select id="selectBox" onchange="changeFunc();"> <option value="1">Option #1</option> <option value="2">Option #2</option> </select> </body> </html>
Even more simplified: You can pass the value attribute directly!
<html> <head> <script type="text/javascript"> function changeFunc(i) { alert(i); } </script> </head> <body> <select id="selectBox" onchange="changeFunc(value);"> <option value="1">Option #1</option> <option value="2">Option #2</option> </select> </body> </html> The alert will either return 1 or 2.
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