在从 mysql/php 加载的表单上触发 AJAX 函数

Question

我有一个通过 php 从 mysql 表填充的下拉菜单。选择项目时，使用第一个形式的变量触发第二个下拉菜单。通过 onchange 触发器进行选择时，这将按预期工作。

不过我想改变这一点，并在加载下拉菜单并且预先设置所选项目（从上一页设置）时触发脚本，我不想要任何用户交互。

这是表单代码

                <div><select class="form-control m-b" name="id" onChange="get_engineers(this.value)" style="font-family: monospace">
                    <?php 
                        $qry = "SELECT id,name FROM products WHERE Parent_team = $parent_team ORDER BY name" ;
                        $stmt = $mysqli->prepare($qry);
                        $stmt->execute();
                        $result = $stmt->get_result();

                        while($row = $result->fetch_assoc()) {                          
                        if($product==$row['name']){
                            $selectCurrent='selected';
                        }else{
                            $selectCurrent='';}
                        echo '<option value="'.$row['id'].'" '.$selectCurrent.'>'.$row['name'].'</option>';
                    }
                    ?>
                                </select>
                                </div>
                                </div>

第二个表单下拉

<div class="form-group"><label class="control-label">Engineer</label>

                                <select class="form-control m-b" name="engineer" id="engineer" style="font-family: monospace">
                                    <option selected="selected">--Select Engineer--</option>
                                </select>
                                </div>

还有剧本

<script>
function get_engineers(id)
{
    $.ajax({
       type: "GET",
       url: "ajax_engineers.php", /* The engineer id will be sent to this file */
       beforeSend: function () {
      $("#engineer").html("<option>Loading ...</option>");
        },
       data: "id="+id,
       success: function(msg){
         $("#engineer").html(msg);
       }
       });
} 
</script>

我尝试了 onload 而不是 onchange，但没有任何反应。 谢谢

Answer 1

首先，在您的第一个选择中添加一个 id 属性：

<select id="my-unique-id" class="form-control m-b" name="id">

然后你可以像这样通过 jQuery onload 触发它：

<script>

    $(function(){

        // This will run it on page load to catch any auto-filled values
        get_engineers($('#my-unique-id').val());

        // This will run it when the value is changed
        $('#my-unique-id').change(function(){
            get_engineers($(this).val());
        });
    });

</script>