PHP AJAX JSON 表单提交时的下拉值

Question

我想在提交表单时保留下拉列表的值。我有两个下拉菜单 - 部门和项目通过 AJAX 相互关联。当我提交时，页面被重新加载，默认部门和项目的值是所有部门和所有项目，但是我希望保留用户选择的值。

这是代码。如果缺少其余代码，请原谅，因为我只显示了所需的代码。

    <html><head><script type="text/Javascript">

        function showdept(){
            $('#deptdropdown').empty();
            $('#deptdropdown').append("<option value='0'> All Departments </option>");
            $('#projectdropdown').append("<option value='0'> All Projects </option>");
            $.ajax({
                type:"POST",
                url:"departmentdropdown.php",
                contentType:"application/json; charset:utf-8",
                dataType:"json",
                success: function(data){
                    $('#deptdropdown').empty();
                    $('#deptdropdown').append("<option value='0'> All Departments </option>");
                    $.each(data,function(i,item){
                        $('#deptdropdown').append('<option value="'+ data[i].deptID +'">'+ data[i].deptname +'</option>');
                    });
                },
                complete: function(){
                }
            });
        }

        function showproject(deptID){       
            $('#projectdropdown').empty();
            $('#projectdropdown').append("<option value='0'> All Projects </option>");          
            $.ajax({
                type:"POST",
                url:"projectdropdown.php?dID="+deptID,
                contentType:"application/json; charset:utf-8",
                dataType:"json",
                success: function(data){
                    $('#projectdropdown').empty();
                    $('#projectdropdown').append("<option value='0'> All Projects </option>");
                    $.each(data,function(i,item){
                        $('#projectdropdown').append('<option value="'+ data[i].proID +'">'+ data[i].projectname+'</option>');
                    });
                },
                complete: function(){
                }
            });
        }

        $(document).ready(function(){               //Initial call to the functions.

            showdept();                             //Shows all the departments.

            $("#deptdropdown").change(function(){   //When department changes, call the project function
                var deptid=$("#deptdropdown").val();
                showproject(deptid);
            });</script></head><body><div id="container" style="min-height:500px; border-bottom:2px solid grey"><div id="verticaldropdown" style="width:200px; background:yellow; border-right: 1px solid grey; min-height:500px; float:left">
    <form method="POST" action="">
        <div align="center">
        <div>Department</div>
        <div><select name="dept_selected" style="width:160px" id="deptdropdown"></select></div>
        </div>
        <br />
        <div align="center">
        <div>Project</div>
        <div><select name="project_selected" style="width:160px" id="projectdropdown"></select></div>
        </div>
        <br />
        <div align="center">
        <input type=submit value='Go' name='showcompliance'>
        </div>
    </form> 
    </div>
</div>
</body>
</html>

Answer 1

您需要所选项目的深度和项目 ID：

$.each(data,function(i,item){
 if(data[i].deptID==choosen_dept){
    $('#deptdropdown').append('<option value="'+ data[i].deptID +'" selected>'+ data[i].deptname +'</option>');
 }else{
    $('#deptdropdown').append('<option value="'+ data[i].deptID +'">'+ data[i].deptname +'</option>');
 }
});

Answer 2

您有 2 个选项来解决此问题：
1) 您可以使用AJAX提交表单，这不会清除表单
中的选择 2) 您可以在页面刷新后使用PHP预填下拉列表中的值。
请选择一个，我将相应地编辑我的答案。

PHP AJAX JSON 表单提交时的下拉值

PHP AJAX JSON Drop Down value on form submission

php

ajax

json

reload

drop-down-menu