232

I have a change event that is working fine but I need to get it to recurse.

So I have a function that is triggered on change that will "change" other drop downs based on a class selector (notice "drop downS", there could be more than one). This proxy change does not trigger the function and so fails. How can I get it to work?

Code

$(document).ready(function () {
    var activeDropBox = null;

    $("select.drop-box").change(function () {
        var questionId = $(this).attr("questionId");
        var selectedAnswer = $(this).val();
        activeDropBox = this;

        alert(this.questionId);

        $.ajax(
        {
            type: "POST",
            url: answerChangedActionUrl,
            data: { questionId: questionId, selectedValue: selectedAnswer },
            success: function (data) {
                SetElementVisibility(data.ShowElement, questionId);
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('XMLHttpRequest:' + XMLHttpRequest.responseText);
                alert('textStatus:' + textStatus);
                alert('errorThrown:' + errorThrown);
            }
        });
    });

    function SetElementVisibility(visible, questionId) {
        // I would like each child to then trigger the change event...
        $(".childOf" + questionId)[visible ? 'show' : 'hide']('slow');
        
        // Suggested code
        //$(".childOf" + questionId + " select").trigger("change");

        if (!visible) {
            $(".childOf" + questionId + " select").attr('selectedIndex', 0);
        }
    }
}

The suggestions so far seem to work, but as the change event triggers an ajax post it now seems to fail here. I'm going to play around with it but that is something for another question I feel.

4
  • 1
    Provide some code so we can have a look Nov 22, 2010 at 15:51
  • How can we tell you how to get it to work, when you haven't shown us what it is?
    – user113716
    Nov 22, 2010 at 15:58
  • 1
    I thought it was a simple concept and didn't feel code was required. The answers so far seem to have understood my explanation and so I am trying their solutions now. If I don't have any joy I'll post some code. My implementation is actually much more complex.
    – 4imble
    Nov 22, 2010 at 16:05
  • 1
    Sorted it, was a problem with me changing the value after the ajax post. Thanks all for the help. The suggestions posted worked like a charm.
    – 4imble
    Nov 22, 2010 at 16:35

5 Answers 5

503

Use the trigger() method

$(selector).trigger("change");
5
  • 4
    Is there any benefit to this over change()? Or is it just preference? Oct 13, 2015 at 16:36
  • 6
    @JoshPinter no real benefit, more a preference. But definitely easier to abstract as a parameter than a method name. Oct 28, 2015 at 1:29
  • 1
    Setting a value before actually triggering change event is the best way!! Mar 18, 2020 at 6:12
  • 3
    Latest versions of jQuery (3 atm) will raise a warning when using the deprecated shorthand .change(). You should use .trigger('change') instead.
    – Tim
    Jul 21, 2021 at 14:44
  • lets celebrate with 500 vote. dear john. its really help ful for me Aug 15 at 8:57
53

For me

$('#element').val('...').change()

is the best way.

Note: .change() is deprecated in newer versions use .trigger('change') instead.

5
  • Yeah!, I like this one May 14, 2016 at 16:44
  • Yes! it allows to choose option on the same time. I think your answer deserves to be the best here. Sep 19, 2017 at 11:05
  • This is the only way to trigger change event when programmatically altering the element's value.
    – CodeMantle
    Jul 26, 2020 at 9:45
  • 1
    this is now deprecated. all best function essentials for development are getting deprecated... is it to make the developer keep learning new things always?
    – Amit Shah
    Mar 24, 2021 at 3:04
  • @AmitShah Yeah I think .change() is deprecated in newer versions but .trigger('change') can be used just as well. I think the jQuery team is tired of making shortcuts for functions. It is also easier to find the right function to call when the documentation is a lot smaller. Sep 14, 2021 at 7:17
21

The parameterless form of the change() method triggers a change event. You can write something like:

$(document).ready(function() {
    $("#yourInitialElementID").change(function() {
        // Do something here...
        $(".yourDropDownClass").change();
    });
});
1
  • this method is not getting Deprecated.
    – Amit Shah
    Mar 24, 2021 at 3:05
15
$(selector).change()

.change()


.trigger("change")

Longer slower alternative, better for abstraction.

.trigger("change")

$(selector).trigger("change")
13

Use That :

$(selector).trigger("change");

OR

$('#id').trigger("click");

OR

$('.class').trigger(event);

Trigger can be any event that javascript support.. Hope it's easy to understandable to all of You.

Your Answer

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

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