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>

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

1 个答案: