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.
Share Improve this question asked Jun 28, 2017 at 8:53 Joost DöbkenJoost Döbken 4,0235 gold badges44 silver badges95 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
4 Answers
Reset to default 10You 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');