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

Improve this question
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 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. 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. :) 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>. Commented Jan 23, 2015 at 11:37

5 Answers 5

Reset to default
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;
    });
}());
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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.
Also plz correct the self invoking function closing brackets. I think it should be this way })(); instead of }());
@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.
But still I'm curious. However your approach is good and its a neat trick.
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.

Improve this answer

1 Comment

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.
0

use

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

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

Improve this answer

1 Comment

Well it doesn't work. I don't know what other comment this needs.
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>
Improve this answer

Comments

-1

simply

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

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

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

Improve this answer

3 Comments

This is not the desired behavior.
@MrUpsidown what do you mean by not desired?? Would you mind to elaborate a bit?
Your code triggers the function every time the <select> element is clicked. He wants something to happen when an <option> is clicked. Read again.

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.