Question

我正在使用2个下拉列表。其中一个列表来自Ajax代码。我的问题是，在重新加载表单时，如何确保该值保留在第二个下拉列表中。我将触发器更改事件用于模型下拉列表的值。我的代码在下面

--- i

从堆栈溢出中使用的触发器更改Jquery。 --i还有一个表名模型，车辆的价值来自make表。

-

<?php
 include "conn.php";
 $exe=$con->query("select * from make");

?>

<!DOCTYPE html>
<html>
<head>
    <title>Ajax</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
       $('#make').trigger("change");
       //console.log(make);
       function getModel()
        {
                var mid= document.getElementById("make").value;
                //console.log(mid);
                $.ajax({
                          type:"POST",
                          url :"model.php",
                          data:"makeid="+mid,
                          success:function(ans)
                          {
                              document.getElementById("model").innerHTML=ans;


                           }
                      });
            }


    </script>
</head>
<body>
<form method="post">
    <table align="center">
        <tr>
            <td>Make</td>
            <td>
                <select name="make" id="make" onchange="return getModel()">
                    <?php
                    while ($row=$exe->fetch_object())
                     {
                    ?>
                    <option value="<?php echo $row->make_id?>">
                        <?php if(isset($_POST['make']) && $_POST['make']==$row->make_id) echo "selected";?>                          
                        <?php echo $row->make_name?></option>
                    <?php
                        }
                    ?>
                </select>

            </td>
        </tr>
        <tr>
            <td>Model</td>
            <td><select name="model" id="model">
                <option value="">.....</option>
            </select></td>
        </tr>
        <tr>
            <td><input type="submit" name="submit" value="submit"></td>
        </tr>
    </table>
</form>
</body>
</html>

Answer 1

此代码会将您的下拉值存储到存储中

let dropdownModel= document.getElementById("model").value
localStorage.setItem("myValue", dropdownModel);

此代码将从下拉菜单中加载您存储的值，并将其放回原处

document.getElementById("model").value = localStorage.getItem("myValue");

Answer 2

使用jquery进行更改，

$(document).ready(function(){

$("#make").on('change', function(){
     var make_id= $("#make option:selected").val();


                $('#model').empty();

                    $.ajax({
                            url: 'model.php',
                            type: 'POST',
                            dataType: "text",
                            data: {
                                make_id: make_id,


                            }
                        }).done(function(data){
                          $('#model').html(data);


          });//ajax success function
}).change();




});

在model.php中像这样下拉

<option>A</option>
<option selected >B</option>

Answer 3

通过此代码，您可以获取第二个下拉名称模型值。您可以在加载表单时选择它。使用此代码 $（document）.ready（function（）{

$（“＃make”）。trigger（'change'）; $（“＃model”）。selectedIndex =;

}）;

重新加载页面后，Ajax值保持不变

3 个答案: