9

How can I trigger the jQuery change event every time even when user selects the same value? I need a refresh effect e.g if a user select Lawyer and it alert hello then again user select Lawyer from the dropdown and it should alert hello. How can I achieve it? Following is the code.

jQuery

function filterPullDown () {
    alert('hello');
}
$(".businessTypePullDown").change(filterPullDown);

HTML

<select class="businessTypePullDown">
    <option value="" disabled selected>Business Type</option>
    <option value="1">General</option>
    <option value="2">Lawyer</option>
    <option value="3">Software Development</option>
    <option value="4">Auto-repair</option>
</select>

Link to fiddle

11
  • 2
    $(".businessTypePullDown").click(function(){// perform required operation}); Commented Jan 23, 2015 at 10:50
  • 1
    :) It will not even let user select any value. @PramodKarandikar
    – Superman
    Commented Jan 23, 2015 at 10:52
  • Does the <option> HTMLOptionOElement support any kind of element? It seems that even a basic click won't be listened.
    – briosheje
    Commented Jan 23, 2015 at 11:34
  • @briosheje It is possible I know. But how to do it is either required an answer from SO or effort to jog my memory. :)
    – Superman
    Commented Jan 23, 2015 at 11:36
  • Do you actually have any proof it is possible? I'm not telling it isn't, I was just noticing that it actually seems to be impossible to attach any kind of even to an <option>, while it is possible to attach events on a <select>.
    – briosheje
    Commented Jan 23, 2015 at 11:37

5 Answers 5

2

This should work. Its a combination of flags and click events. It will always get triggered when you click on an option.

<select class="businessTypePullDown">
    <option value="" disabled selected>Business Type</option>
    <option value="1">General</option>
    <option value="2">Lawyer</option>
    <option value="3">Software Development</option>
    <option value="4">Auto-repair</option>
</select>
(function () {

  var filterPullDown = function() {
         alert('clicked');   
    }
    var flag = false;
    $(".businessTypePullDown").click(function () {
        if (flag) {
            filterPullDown()
        }
        flag = !flag;
    });

    $(".businessTypePullDown").focusout(function () {
        flag = false;
    });
}());
4
  • 1
    I appreciate your approach to achieve the functionality. But it is more of a hack instead of the solution. Still looking for a change event enhancement. I'll accept this answer if no one come with a change event fix. Thanks Stelios.
    – Superman
    Commented Jan 24, 2015 at 3:23
  • Also plz correct the self invoking function closing brackets. I think it should be this way })(); instead of }());
    – Superman
    Commented Jan 24, 2015 at 3:25
  • @Superman The way i did it works as well, its just different style :) Btw i don't think is possible to use the change 'event'... by definition, nothing changes when you select the same option within a select element thus again any other approaches, will still be a hack i think.
    – skay-
    Commented Jan 24, 2015 at 17:44
  • But still I'm curious. However your approach is good and its a neat trick.
    – Superman
    Commented Jan 25, 2015 at 5:48
2

I think @MrUpsidown had just answered the question without knowing it! Why not add the event handler on the option element itself rather than the outer select element attribute.

Going back to Superman's code, use this:

$(".businessTypePullDown option").on("click", filterPullDown);

That will invoke the 'filterPullDown' function EVERY time, no matter whether the same value is selected.

1
  • This idea really helped! I needed to find a way to defocus dropdown option in IE and Edge browsers even if user clicks on already selected value. This did the trick. In my case I have put $(this).parent().blur(); inside invoked function.
    – kasparspr
    Commented Sep 13, 2017 at 11:00
0

use

$(".businessTypePullDown>option:not(:disabled)").click(filterPullDown);

http://jsfiddle.net/68k31zct/14/

1
  • Well it doesn't work. I don't know what other comment this needs.
    – MrUpsidown
    Commented Jan 23, 2015 at 13:59
0

Hope this helps someone.

So once the user clicks the select the following code will make the disabled option the selection thus mimicking a state whereby the user is making a change in their selection, and since the .change() event on <select> only fires if the selection option is changed(doesn't remain the same) and the user cannot select a disabled option this insures that the change event always happens, you can then just attach a callback to .change() event of the select.

$('select').on('click', function () {
   $(this).find('option').attr('selected', false);
   $(this).find('option:disabled').attr('selected', true);
   // replace options:disabled to options:first-child
   // if you don't want to pollute the select options. 
});

Using the following html:

<select title="Sort By">
   <option disabled>Sort By</option>
   <option selected>Name</option>
   <option>Date</option>
   <option>Price</option>
</select>
-1

simply

function filterPullDown () {  
  console.log(this.selectedIndex);
}

$(".businessTypePullDown").on('click', filterPullDown);

http://jsbin.com/cunoxawemu/1/edit?js,console,output

3
  • This is not the desired behavior.
    – MrUpsidown
    Commented Jan 23, 2015 at 14:59
  • @MrUpsidown what do you mean by not desired?? Would you mind to elaborate a bit?
    – code-jaff
    Commented Jan 23, 2015 at 15:04
  • Your code triggers the function every time the <select> element is clicked. He wants something to happen when an <option> is clicked. Read again.
    – MrUpsidown
    Commented Jan 23, 2015 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.