Does the JavaScript Onclick Event Not Work on <Select> <Option>'S

Does the JavaScript onclick event not work on select option's?

Add this function to your JS:

function showHideOther(){
    if (document.getElementById('drop_down').value == 'other') {
         showOther();   
    } else {
         hideOther();   
    }
}

And change your select element like this:

<select name="" id="drop_down" onchange="showHideOther();">
        <option value="choose">Please choose</option>
        <option value="Allure">Allure</option>
        <option value="Elle">Elle</option>
        <option value="In-Style">In-Style</option>
        <option value="other">Other</option>
</select>

function showHideOther() {  if (document.getElementById('drop_down').value == 'other') {    showOther();  } else {    hideOther();  }}
function showOther() {  document.getElementById('other').value = "";  document.getElementById('other').style.display = 'block';  document.getElementById('otherBR').style.display = 'block';}
function hideOther() {  document.getElementById('other').style.display = 'none';  document.getElementById('otherBR').style.display = 'none';}

#other {  display: none;}#otherBr {  display: none;}

<select name="" id="drop_down" onchange="showHideOther();">  <option value="choose">Please choose</option>  <option value="Allure">Allure</option>  <option value="Elle">Elle</option>  <option value="In-Style">In-Style</option>  <option value="other">Other</option></select><input type="text" name="fields_where" id="other" placeholder="Other" /><br id="otherBR" />

onclick Event Not Running on HTML Select Drop Down

You have to use onchange on the select tag not on the option tag.

function otherPayment() {  var paymentType = document.getElementById("paymentType").value;  if (paymentType == "Other") {    alert("test");  }}

<div class="form-group">  <label for="paymentType">Payment Type:</label>  <select class="form-control" id="paymentType" name="paymentType" required onchange="otherPayment()">    <option value="">-</option>    <option value="Payment (Initial)">Payment (Initial)</option>    <option value="Payment (Full)">Payment (Full)</option>    <option value="Payment (Balance)">Payment (Balance)</option>    <option value="Delivery Fee">Delivery</option>    <option  value="Other">Other</option>  </select></div>

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>

onclick not working for select menu options

I think what you are looking for is onChange:

function changed(value){ alert(value);}

<select onChange="changed(this.value)">    <option>No</option>    <option>Yes</option></select>

onclick event is not working with option tag in html?

Jquery

$(function(){  $('#testdropdownmenu').on('change', function(){  var val = $(this).val();  if(val === 'third') {    alert('third option')   }  else if(val === 'fourth') {    alert('fourth option')   }  })  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><form name="testform" id="testformid"><select name="testdropdownmenu" id="testdropdownmenu"><option value="" selected>Please Select</option><option value="https://www.w3schools.com">First Option</option><option value="https://www.google.co.in">Second Option</option><option value="third">Third Option</option><option value="fourth">Fourth Option</option></select><input type="button" name="go" value="Go" onClick="location=document.testform.testdropdownmenu.options[document.testform.testdropdownmenu.selectedIndex].value;"></form>

Change select's option and trigger events with JavaScript

Unfortunately, you need to manually fire the change event. And using the Event Constructor will be the best solution.

var select = document.querySelector('#sel'),    input = document.querySelector('input[type="button"]');select.addEventListener('change',function(){    alert('changed');});input.addEventListener('click',function(){    select.value = 2;    select.dispatchEvent(new Event('change'));});

<select id="sel" onchange='alert("changed")'>  <option value='1'>One</option>  <option value='2'>Two</option>  <option value='3' selected>Three</option></select><input type="button" value="Change option to 2" />

Javascript onclick in option of select not working on mobile

You are using onclick, but on mobile you are not clicking but changing the value of parent select instead. Check this link and you will see it works on mobile as well.

How to use onClick with divs in React.js

To set your mind at ease, the onClick event does work with divs in react, so double-check your code syntax.

These are right:

<div onClick={doThis}>
<div onClick={() => doThis()}>

These are wrong:

<div onClick={doThis()}>
<div onClick={() => doThis}>

(and don't forget to close your tags... Watch for this:

<div onClick={doThis}

missing closing tag on the div)

$(document).on(click... not working?

You are using the correct syntax for binding to the document to listen for a click event for an element with id="test-element".

It's probably not working due to one of:

Not using recent version of jQuery
Not wrapping your code inside of DOM ready
or you are doing something which causes the event not to bubble up to the listener on the document.

To capture events on elements which are created AFTER declaring your event listeners - you should bind to a parent element, or element higher in the hierarchy.

For example:

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

In this example, only the "bound to document" alert will fire.

JSFiddle with jQuery 1.9.1

Does the JavaScript Onclick Event Not Work on <Select> <Option>'S