javascript - jquery wait on change event - Stack Overflow

admin管理员组

文章数量:1241125

With jQuery I built a dynamic form; when the first select-input (named category) changes a second select-input (named subcategory) appears with sub-select items. And this works perfect now.

When a specific url parameter is given I want to auto-fill in the form after the page is ready.

$(document).ready(function () {
    // initialize defaults
    var category = getUrlParameter('category');
    var subcategory = getUrlParameter('subcategory');
    if (category && subcategory) {
        $("select#category").val(category).change();
        $("select#subcategory").val(subcategory).change();
    }
});

Where getUrlParameter is a helper function I copied from Sameer Kazi.

Currently the first select-input is filled in, the second select-input is generated but not filled in. So actually, the change mand needs to wait untill the first change mand is ready.

With jQuery I built a dynamic form; when the first select-input (named category) changes a second select-input (named subcategory) appears with sub-select items. And this works perfect now.

When a specific url parameter is given I want to auto-fill in the form after the page is ready.

$(document).ready(function () {
    // initialize defaults
    var category = getUrlParameter('category');
    var subcategory = getUrlParameter('subcategory');
    if (category && subcategory) {
        $("select#category").val(category).change();
        $("select#subcategory").val(subcategory).change();
    }
});

Where getUrlParameter is a helper function I copied from Sameer Kazi.

Currently the first select-input is filled in, the second select-input is generated but not filled in. So actually, the change mand needs to wait untill the first change mand is ready.

• javascript
• jquery

Share Improve this question Follow asked Jun 28, 2017 at 8:53 Joost DöbkenJoost Döbken 4,02355 gold badges4444 silver badges9595 bronze badges 2

• Did you thought about a bool value switching true on $("select#category").val(category).change(); – JustARandomProgrammer Commented Jun 28, 2017 at 9:00
• when the first select-input (named category) changes a second select-input (named subcategory) appears with sub-select items we need that code, its important for the problem... – Jonas Wilms Commented Jun 28, 2017 at 9:00

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

You can using jQuery's .when() function, which handles an asynchronous function first before .then() is called.

$.when($("select#category").val(category).change()).then(function() {
  $("select#subcategory").val(subcategory).change();
});

Here below is a small example using those two functions. I have added a console.log function to the select change event handlers so that you can follow what happens.

$("select#category").on('change', function() {
  console.log('[on change] category changed');
  $("select#subcategory").show();
});

$("select#subcategory").on('change', function() {
  console.log('[on change] subcategory changed');
});

$(document).ready(function () {
    // initialize defaults
    var category = 1;
    var subcategory = 2;
    if (category && subcategory) {
        $.when($("select#category").val(category).change()).then(function() {
            console.log('[then] activating subcategory');
            $("select#subcategory").val(subcategory).change();
        });
    }
});

select#subcategory {
  display: none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category">
 <option>...</option>
 <option value="1">value 1</option>
 <option value="2">value 2</option>
</select>
 
 <select id="subcategory">
   <option value="1">subvalue 1</option>
   <option value="2">subvalue 2</option>
 </select>

setTimeout(function(){
$("select#subcategory").val(subcategory).change();
},300);

maybe this? Wait 300 ms till make other change. I guess its enough to have a first one done :)

$("select#category").on("load",function(){
    $("select#subcategory").val(subcategory).change();
});

Maybe this will work if I got your problem

Maybe you can listen for event onChnage

$("select#category").on("change",function(){
    $("select#subcategory").val(subcategory).change();
});

also instead of $("select#category").val(category).change(); try $("select#category").val(category).trigger('change');

本文标签： javascriptjquery wait on change eventStack Overflow