How to trigger jQuery change event on dropdown with same value

问题

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

回答1:

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;
    });
}());

回答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.

回答3:

use

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

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

回答4:

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>

回答5:

simply

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

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

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

来源：https://stackoverflow.com/questions/28108203/how-to-trigger-jquery-change-event-on-dropdown-with-same-value

标签

javascript

jquery

html

javascript-events