CODEWITHSUNDEEP
javascriptjquery
Niek Jonkman
Niek Jonkman

Reputation: 1056

jQuery change does not trigger when a dropdownlist holds one item

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:

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.

Upvotes: 4

Views: 4134

Answers (3)

a_nain
a_nain

Reputation: 185

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

Upvotes: 4

Bradley Ross
Bradley Ross

Reputation: 455

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>

Upvotes: 0

Bilas Sarker
Bilas Sarker

Reputation: 459

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.

Upvotes: 0

Related Questions