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

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

4

1 回答 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>
于 2018-06-09T08:44:52.283 回答