当dropdownlist包含一个项目时，jQuery更改不会触发

Question

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.

Answer 1

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

Answer 2

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.net/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.

Answer 3

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.com/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>