Я хочу сохранить значение раскрывающегося списка при отправке формы. У меня есть два выпадающих списка — отдел и проект, связанные через 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>
Вам нужны идентификаторы отдела и проекта для выбранных:
$.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>');
}
});
У вас есть 2 варианта решения этой проблемы:
1) Вы можете отправить форму, используя AJAX, и это не очистит выбор в форме
2) Вы можете использовать PHP для предварительного заполнения значений в раскрывающихся списках после обновления страницы.
Пожалуйста, выберите один, и я отредактирую свой ответ соответственно.