How to Use Onclick() or Onselect() on Option Tag in a Jsp Page

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

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>

How to add onClick in html option?

To get the current value of the select, use the onchange event:

function updateValue(value){    document.getElementById('signoff_date').value = value}
// set a defalt valueupdateValue(document.getElementById('months').value)

<select id='months' onchange="updateValue(this.value)">   <option value='9' id='months9'>9 Months</option>   <option value='10' id='months10'>10 Months</option>   <option value='11' id='months11'>11 Months</option>   <option value='12'id='months'>12 Months</option></select>
  <input type='text' name='signoff_date' id="signoff_date">

adding onclick event to html select option

Try it in the onchange handler:

function checkAlert(evt) {  if (evt.target.value === "Say Hello") {    alert('Hello');  }}

<select onchange="checkAlert(event)">  <option>Test</option>  <option>Say Hello</option></select>

onclick on option tag not working on IE and chrome

onclick event on option tag will fail on most versions of IE, Safari and Chrome: reference

If you want to trigger an event whenever user select, why not simply use:

<select onclick="check()">
<option>one</option>
<option>two</option>
<option>three</option>

And if you want to do something with the specific option user selected:

<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)">
<option>one</option>
<option>two</option>
<option>three</option>

This way you are guaranteed to call check() if and only if an option is selected.

Edit: As @user422543 pointed out in the comments, this solution will not work in Firefox. I therefore asked another question here: Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?

So far it seems using <select> tag is will not work consistently in all browsers. However, if we simulate a select menu using library such as jQuery UI select menu or Chosen to create a select menu instead of using <select> tag, click event will be fired on <ul> or <li> tag which is consistent in all browsers I tested.

Javascript onselect change price

Apart from using £ in the prices, which won't work for numbers in JavaScript, <option> tag does not support onselect event. You should use <select>'s onchange event for that.

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

how to add a link on single option in select tag

Bind the event handler to select tag instead of bind the event into options tag.

The onchange event occurs when the value of an element has been changed.

<select class="w-100" id="categoryselect" name="selectcat" onChange="if(this.value=='categories') window.location='addcategories.php'">
      <option value="" disabled selected>Select Category</option>
        <?php 
            $sql="SELECT * FROM categories";
            $result=mysqli_query($conn, $sql);
            while($row=mysqli_fetch_array($result))
            {
                echo '<option value="'.$row["cat_id"].'">'.$row["name"].'</option>';
            } 
        ?>
      <option value="categories">Add New Category</option>
    </select>

How to trigger click event on select element? (not change)

"click selection box->drop menu->click selected option->trigger event"

First of all do not use alert(), it prompts for an extra click you really don't need to waste your time on. Use console.log().

The following demo:

Delegates the click event to select#x:

$('#x').on('click',...

Once clicked, it will trigger a focus event on every even click^✱:

^✱ if (cnt % 2 === 0) { $(this).trigger('focus');}

select#x is also delegated to the focus event and will call optionTrigger():

$('#x').on('focus', optionTrigger);

function optionTrigger() will log the selected <option> index and text:

^✱ if (cnt < 2) {...
...$(this).trigger('blur'); }
var idx = $(this)[0].selectedIndex;
var txt = $(this).find('option').eq(idx).text();

Demo

var cnt = 1;

$("#x").on("click", function(e) {
  if (cnt % 2 === 0) {
    $(this).trigger('focus');
  }
  cnt++;
});

$('#x').on('focus', optionTrigger);

function optionTrigger(e) {
  if (cnt < 2) {
    $(this).trigger('blur');
  } else {
    var idx = $(this)[0].selectedIndex;
    var txt = $(this).find('option').eq(idx).text();
    console.log(idx + ': ' + txt);
  }
}

<select id="x">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Jump menu with onclick function

Replace onchange="fireMarker(this); with onchange="fireMarker(value)"

like:

<html>
<head>  
<script type="text/javascript">
    function fireMarker(id) {
        google.maps.event.trigger(markers[id], 'click');
        markers[id].setAnimation(google.maps.Animation.DROP);
        markers[id].setVisible(true);
   }
</script>
</head>
<body>
    <select onchange="fireMarker(value)">
        <option value="15">1</option>
        <option value="16">2</option>
        <option value="18">3</option>
    </select>
</body>

JS function never being called but others do

Instead of trying to listen for click events on each <option>, you can listen for a change event on the parent <select> tag and retrieve the value of the selected option from the DOM event object inside of your function. See below:

function sortHighestPrice(e) {    var optionValue = e.target.value;}

<select onchange="sortHighestPrice(event)" id="order-select">  <option value="Lowest price" onclick="sortLowestPrice()">    <spring:message code="list.lowest"/>    option1  </option>  <option value="Highest price"         onclick="sortHighestPrice()">    <spring:message code="list.highest"/>    option2  </option></select>

How to Use Onclick() or Onselect() on Option Tag in a Jsp Page