Question

我正在尝试以编程方式选择相关选择框中的选项，因为用户有机会进行搜索，我想自动填写表单（如果是这种情况）。这通常不会很困难，但问题似乎是依赖选择接收了大量数据，因此需要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();
});

从父选择的onChange函数动态填充从属选择后，我需要根据用户的搜索以编程方式选择正确的选项。

Answer 1

<?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>

以编程方式选择从属选择中的选项

1 个答案: