javascript - How to trigger jQuery change event in code - Stack Overflow

admin管理员组

文章数量:1129155

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.

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.

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Apr 8, 2021 at 19:00 Brian Tompsett - 汤莱恩 5,8757272 gold badges6161 silver badges133133 bronze badges asked Nov 22, 2010 at 15:48 4imble4imble 14.4k1515 gold badges7474 silver badges132132 bronze badges 4

• 1 Provide some code so we can have a look – Alex Rashkov Commented 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 Commented 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 Commented 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 Commented Nov 22, 2010 at 16:35

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 523

Use the trigger() method

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

For me

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

is the best way.

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

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

$(selector).change()

.change()

---

.trigger("change")

Longer slower alternative, better for abstraction.

.trigger("change")

$(selector).trigger("change")

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.

本文标签： javascriptHow to trigger jQuery change event in codeStack Overflow