Z jQuery zbudowałem dynamiczną formę; Po pierwszym wejściem-wejściu (o nazwie {x0}}) zmienia drugie wejście wyboru (o nazwie {x1}}) pojawia się przy podselanach. I to działa teraz idealnie.

Gdy podano konkretny parametr URL, chcę automatycznie wypełnić formularz po przygotowaniu strony.

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

Gdzie getUrlParameter jest funkcją pomocniczą skopiowałem z Sameer Kazi.

Obecnie pierwsze wejście SELECT jest wypełnione, drugie wejście wyboru jest generowane, ale nie jest wypełnione. W rzeczywistości polecenie zmian musi czekać, aż polecenie pierwszej zmiany jest gotowe.

2
Joost Döbken 28 czerwiec 2017, 11:53

4 odpowiedzi

Najlepsza odpowiedź

Możesz użyć jQuery's Funkcja {X0}}, która obsługuje funkcję asynchroniczną najpierw Przed .then() jest nazywany.

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

Poniżej znajduje się niewielki przykład przy użyciu tych dwóch funkcji. Dodałem funkcję console.log do wybranej ręki zdarzeń Zmień, abyś mógł przestrzegać tego, co się dzieje.

$("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.com/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>
3
KarelG 28 czerwiec 2017, 09:32

Może możesz słuchać wydarzenia onChnage

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

Także zamiast $("select#category").val(category).change(); próbować $("select#category").val(category).trigger('change');

0
Yordan Nikolov 28 czerwiec 2017, 09:08
$("select#category").on("load",function(){
    $("select#subcategory").val(subcategory).change();
});

Może to będzie działać, jeśli mam twój problem

0
JustARandomProgrammer 28 czerwiec 2017, 09:06
setTimeout(function(){
$("select#subcategory").val(subcategory).change();
},300);

Może to? Poczekaj 300 ms do innej zmiany. Myślę, że wystarczy, aby mieć pierwszy zrobiony :)

2
DanielWaw 28 czerwiec 2017, 09:01