How to use onClick() or onSelect() on option tag in a JSP page?

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>

JavaScript
​x
 
<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?

Answer

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>

JavaScript
 
<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>
​

Advertisement

Answer