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

你需要dept和project 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下拉表单提交值

2 个答案: