我的表单中有一个下拉列表,其中包含2个选项。用户名和城市。如果有人选择用户名2,则Jquery将动态添加用户名选项。同样,如果选择城市,则会添加2个城市选项。
这样可以正常工作,但是一旦表单通过PHP提交到服务器,动态添加的下拉列表和选定的值就会消失。即使在提交表单后,我仍需要保留上次选择的状态。我该如何做到这一点?
例如 - 假设有人选择“城市”,然后他选择科伦坡作为城市选项。表单提交后,我希望表单保留“City”&选择“科伦坡”。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Basic</title>
</head>
<body>
<form method="post" action="post_jquery_element.php">
<select name="choice" id="choice">
<option value="">Select</option>
<option value="username">Username</option>
<option value="city">City</option>
</select>
<span id="update"></span>
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<script src="jquery-1.11.0.js"></script>
<script>
$(function(){
$("#choice").change(function(){
var value=$("#choice").val();
if(value==="username"){
var output="<select name='username' id='username'>";
output+="<option>Mike</option>";
output+="<option>John</option>";
output+="</select>";
$("#update").html(output);
}else if (value==="city") {
var output="<select name='city' id='city'>";
output+="<option>NY</option>";
output+="<option>Colombo</option>";
output+="</select>";
$("#update").html(output);
}
});
});
</script>
</body>
</html>