I am trying to trigger events when options in a dropdown are clicked on. I couldn't find anything that explains how to do this. What I want is to fire the event and use the value of it. When i use .on instead of .change I fire the event everytime the select is clicked and thats not what I want because I only want to use the value of the selected item.

Assume this is dynamically generated:

<select id="dropdownOne">
<option value="1">NumberOne</option>
</select>

Assume this is dynamically generated:

<select id="dropdownTwo">
<option value="1">NumberOne</option>
<option value="2">NumberTwo</option>
</select>

JS:

$("select").change("click", function () {
    //This event is not fired in dropdown one

    //This event is only fired in dropdown two if I change the option
    var value = $(this).val();

    if(value == 1){
        console.log("This logs number 1");
    }else{
        console.log("This logs number 2");
    }
}

How can I:

• Trigger the event on an item in a dropdownlist that holds only one item
• Trigger the event on an item that is clicked multiple times

EDIT: So, my question was marked as a duplicate:

How to call onchange event when dropdown values are same

The "duplicate" has 6 answers:

Vicky Kumar: Says the code of that question is fine and working. This answer does not contribute to my problem

ajpocus: Has an answer, got edited later saying that it doesn't work. Doesn't work

Krupesh Kotecha: Uses a click event on the select, same behaviour as .on This is not what I want

Teja: Fixes the problem for that question but not mine, still doesn't trigger any event when te select only has 1 option or when you click an option more than once This is not what I want

charu joshi: Uses .on event with :option selecter, doesn't work because the :option selecter is unknown, can also not be found in the jQuery API documentation Doesn't work

derp: This answer explains how to remove duplicates and then uses the change event, this might work for the question of the "duplicate" but I never load in duplicate items in my select, and even then it still uses the change event which doesn't do what I want as explained in my question This answer does not contribute to my problem

So all of the above answers from the "duplicate" question do not apply to my problem/question. Also none of those answers were marked as accepted by the original poster.

I am trying to trigger events when options in a dropdown are clicked on. I couldn't find anything that explains how to do this. What I want is to fire the event and use the value of it. When i use .on instead of .change I fire the event everytime the select is clicked and thats not what I want because I only want to use the value of the selected item.

Assume this is dynamically generated:

<select id="dropdownOne">
<option value="1">NumberOne</option>
</select>

Assume this is dynamically generated:

<select id="dropdownTwo">
<option value="1">NumberOne</option>
<option value="2">NumberTwo</option>
</select>

JS:

$("select").change("click", function () {
    //This event is not fired in dropdown one

    //This event is only fired in dropdown two if I change the option
    var value = $(this).val();

    if(value == 1){
        console.log("This logs number 1");
    }else{
        console.log("This logs number 2");
    }
}

How can I:

• Trigger the event on an item in a dropdownlist that holds only one item
• Trigger the event on an item that is clicked multiple times

EDIT: So, my question was marked as a duplicate:

How to call onchange event when dropdown values are same

The "duplicate" has 6 answers:

Vicky Kumar: Says the code of that question is fine and working. This answer does not contribute to my problem

ajpocus: Has an answer, got edited later saying that it doesn't work. Doesn't work

Krupesh Kotecha: Uses a click event on the select, same behaviour as .on This is not what I want

Teja: Fixes the problem for that question but not mine, still doesn't trigger any event when te select only has 1 option or when you click an option more than once This is not what I want

charu joshi: Uses .on event with :option selecter, doesn't work because the :option selecter is unknown, can also not be found in the jQuery API documentation Doesn't work

derp: This answer explains how to remove duplicates and then uses the change event, this might work for the question of the "duplicate" but I never load in duplicate items in my select, and even then it still uses the change event which doesn't do what I want as explained in my question This answer does not contribute to my problem

So all of the above answers from the "duplicate" question do not apply to my problem/question. Also none of those answers were marked as accepted by the original poster.

• javascript
• jquery

Share Improve this question Follow edited May 23, 2017 at 11:58 CommunityBot 111 silver badge asked Jun 21, 2016 at 11:32 Niek JonkmanNiek Jonkman 1,05622 gold badges1515 silver badges3636 bronze badges 6

• What is the concern with change event ? you can invoke the handler while registering event.. $("select").on("change", function(){}).change(); – Rayon Commented Jun 21, 2016 at 11:34
• $("select").change("click", function () { or $("select").on("click/change", function () { ? – a_nain Commented Jun 21, 2016 at 11:35
• Having both click and change event on drop down is a bad idea, a change event is followed by a click itself on drop down. So better would be to decide when to attach the click event. – Rohit416 Commented Jun 21, 2016 at 11:37
• None of these work, eventually I want to trigger a change (or any) event that can handle a option click when there is only one option available in the dropdown, but I do not want to trigger the event yet by clicking the dropdown arrow, only when the actual option is clicked. – Niek Jonkman Commented Jun 21, 2016 at 12:33
• try this $( "select" ) .change(function () { $('#select option:selected').val() } – Suraj Singh Commented Jun 21, 2016 at 13:23

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

By definition:

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

When there is only one option like:

<select id="dropdownOne">
   <option value="1">NumberOne</option>
</select>

No matter how many time you try to change/click the options, the value of select will remain same, 1. And change event will never execute.

And according to this answer, onSelect() and onClick() events are not supported by the <option> tag.

I'd suggest you prepend an additional option with value -1 or 0 to your select.

<select id="dropdownOne">
    <option value="-1">--- Select ---</option>
    <option value="1">NumberOne</option>
</select>

Or you can create a custom select control like suggested by @Bradley Ross

Try this code:

var value;
$('select').focus(function () {
        value = this.value;
        if(value == 1){
            console.log("This logs number 1");
        }else{
            console.log("This logs number 2");
        }
    }).change(function() {
      value = this.value;
      if(value == 1){
        console.log("This logs number 1");
      }else{
        console.log("This logs number 2");
      }
});

Here is the jsfiddle link: https://jsfiddle/cdantdor/

For the one item in the select drop down, I got the value focus event and after selecting item update the value by change event. Hopefully it will fulfill your purpose.

The following code may satisfy your need although it isn't exactly what you asked for. When you click on the button marked Options, it opens a little menu the vanishes when you click on Close Menu. Although it isn't actually a pulldown menu, it acts as one.

The problem is that you are trying to alter the internals of a control rather than basing actions on the control itself. Javascript has very little control over the internals of a control except as specified in the interface.

Look at http://www.w3schools./howto/howto_js_dropdown.asp

<!DOCTYPE html>
<html>
   <head>
      <script>
         var button;
         var textarea;
         var menu;
         var closer;
         function starter() {
            button = document.getElementById("button");
            textarea = document.getElementById("textarea");
            menu = document.getElementById("menu");
            closer = document.getElementById("close");
            textarea.value = "Display area for selections\r\n";
            button.onclick = open;
            closer.onclick = close;
         }
         function close() {
            menu.style.display = "none";
            menu.style.visibility = "hidden";
         }
         function open() {
            menu.style.display = "block";
            menu.style.visibility="visible";
         }
         function press(char) {
             textarea.value = textarea.value + char + "\r\n";
         }
         window.onload=starter;
      </script>
      <style>
         #menu { display:none; border: 2px solid black; }
      </style>
   </head>
   <body>
      <p>Click on button marked <i>Options</i> to open menu for selection.</p>
      <form>
         <div id="menu">
            <p>Clicking on options will cause them to appear in the text box</p>
            <ul>
               <li><input type="button" value="First" onclick="press('First');" /></li>
               <li><input type="button" value="Second" onclick="press('Second');" /></li>
               <li><input type="button" value="Third" onclick="press('Third');"</li>
               <li><input type="button" value="Close menu" id="close" /></li>
            </ul>
            <p>Click on <i>close menu</i> to close this section</p>
         </div>
         <p><input type="button" id="button" value="Options"  /> </p>
         <p><textarea cols="20" rows="20" id="textarea"></textarea></p>
      </form>
   </body>
</html>