Question

我有2个下拉列表，其中一个由ajax填充。提交并显示所选值后，我想保留ajax下拉列表中的数据，但我不知道如何这是我的代码：

    <select name="centrale" class="custom-select" id="centrale">
        <option value="" >Centrales</option>
        <option value="all" <?php if(isset($centrale) && $centrale=='all') echo "selected='select'";?> >Toutes centrales</option>
        <option value="LECASUD" <?php if(isset($centrale) && $centrale=='LECASUD') echo "selected='select'";?> >LECASUD</option>
        <option value="SCACENTRE" <?php if(isset($centrale) && $centrale=='SCACENTRE') echo "selected='select'";?> >SCACENTRE</option>
</select>
    <select id="magasins" name="magasins" class="custom-select">
    </select>




    $('#centrale').on('change',function(){
    $('#magasins').html("<option value='allMag'>tout magasins</option>");
    var centrale =$(this).val();
    if (centrale){
        $.ajax({
            type:'POST',
            url:'ajaxMag.php',
            data:'centrale='+centrale,
            success:function(html){
            $('#magasins').append(html);
            }
        });
    }
    });

Answer 1

<head>
    <title>Example</title>
</head>

<body>
    <SELECT type = "text" id = "centrale">
        <option value="abc">ABC</option>
        <option value="cdf">CDF</option>
    </SELECT>

    <SELECT type = "text" id = "magasins" onchange ="save_magasins();">
        <option value="asd">asd</option>
        <option value="dfg">fdg</option>
    </SELECT>

    <input type = "button" id = "submit_btn">
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
    $('#centrale').on('change',function(){
        //réinitialise la liste sinon les selections s'ajoutent
        $('#magasins').html("<option value='allMag'>tout magasins</option>");
        var centrale = $(this).val();

        if (centrale){
            $.ajax({
                type:'POST',
                url:'ajaxMag.php',
                data:{centrale:centrale},
                success:function(html){
                    $('#magasins').append(html);
                }

            });
        }
    });
});

function save_magasins(){
    var magasins = document.getElementById('magasins').value;             
    window.localStorage.setItem("magasins", magasins);
    console.log(localStorage.getItem("magasins"));
}

console.log(localStorage.getItem("magasins"));

</script>

尝试一下。现在，我正在尝试基于onchange触发器保存第二个下拉值。如果要从第二个下拉菜单中保存所有选项，则最好先将它们保存在成功函数本身中，然后填充。如果您只想保存所选的选项，那么它将很好用。

提交到下拉列表并显示所选值后，如何保持ajax数据？

1 个答案: