Программно выбрать параметры в зависимых выборках

0

Я пытаюсь программно выбирать опции в зависимых блоках выбора, потому что у пользователя есть возможность выполнить поиск, и я хочу автоматически заполнить форму, если это произойдет. Обычно это не так сложно, но проблема заключается в том, что зависимый выбор получает много данных и, следовательно, занимает 1-2 секунды для загрузки, и он не устанавливается так, как должен, поэтому я попытался использовать обратный вызов на триггер изменения. Но теперь он ничего не делает в этой функции. Пожалуйста помоги! (И скажите мне, если я смехотворна и должен делать это совершенно по-другому.)

Вот мой JSFiddle, поэтому вы видите основную идею того, что я делаю (она не работает в скрипке): http://jsfiddle.net/jenborn/24Kpv/1/

   $("select#firstselect").val('abc').trigger("change", true, [function(){
     console.log("initial value and change DONE");
     console.log('Jen is awesome');
     $("select#secondselect").val('123');
     console.log($("select#secondselect").val()); 
   }]);

Зависимый выбор заполняется как таковой:

$.getJSON("/cat_dropdowns.php",{parent_id: $(this).val(), required: '1', ajax: 'true'}, function(j){
  var options = '';
  for (var i = 0; i < j.length; i++) {
    options += '<option value="' + j[i].value + '">' + j[i].text + '</option>';
  }

var next_select = ++this_select;
  $("select#" + ctrl + next_select + "_" + row).html(options);
  Foundation.libs.forms.refresh_custom_select($('#' + ctrl + next_select + "_"  + row), true);
  Foundation.libs.forms.assemble();
});

После того, как зависимая выборка будет динамически заполнена из родительского элемента select onChange, мне необходимо программно выбрать правильный вариант на основе поиска пользователя.

  • 1
    Я не совсем понимаю, что вы хотите сделать. У вас есть два выбора, варианты 2-го динамически загружаются (каким образом?) На основе 1-го значения, а затем? Что ты пытаешься сделать? скажи еще немного.
  • 0
    В этом суть проблемы: зависимый выбор, который заполняется на переменную родительского выбора, не устанавливается программно, как это должно быть. Он заполняется, но не устанавливается, и я не уверен, почему, так как окружающие строки console.log работают правильно. И установка правильного значения должна ждать, пока не сработает событие Change, я думаю, именно поэтому я попытался использовать обратный вызов, но я не уверен, что это было правильно, и, вероятно, именно поэтому это бомбардировка.
Показать ещё 3 комментария
Теги:

1 ответ

0 
<?php ?>
<html>
    <head>
        <title>loder</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <form method="post" action="#">
            Team 1:
            <select id="team1" name="team1" onchange="team1select()">
            </select>
            Team 2:
            <select id="team2" name="team2" onchange="team2select()" disabled="disabled">
            </select>
        </form>
    </body>
    <script>
        $(document).ready(function () {
            getTeam1();
            getTeam2();

        });
        function getTeam1() {
            var json_array = ['India', 'Pakistan', 'Australiya'];
            var default_option1 = "<option value=''>Select Team 1</option>";
            $("#team1").append(default_option1);
            $.each(json_array, function (key, val) {
                var option = "<option value='" + key + "'>" + val + "</option>";
                $("#team1").append(option);
            });
        }
        function getTeam2() {
            var json_array = ['India', 'Pakistan', 'Australiya'];
            var default_option2 = "<option value=''>Select Team 2</option>";
            $("#team2").append(default_option2);
            $.each(json_array, function (key, val) {
                var option = "<option value='" + key + "'>" + val + "</option>";
                $("#team2").append(option);
            });
        }

        function team1select() {
            $("#team2").empty();
            getTeam2();
            var dropdown1_selected = $("#team1").val();
            $("#team2 [value='" + dropdown1_selected + "']").remove();
            $("#team2").prop('disabled',false);
        }
        function team2select() {
            var dropdown2_selected = $("#team2").val();
            $("#team1 [value='" + dropdown2_selected + "']").remove();
        }
    </script>
</html>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню