动态选择选项，Ajax、json和PHP在提交后保持选择选项
我有一个简单的使用Ajax从json文件动态生成的select选项，但我没有做到的是在提交表单后将以前选择的选项保持为选中状态。用发送到JS的PHP变量尝试了这一点，但我找不到在脚本标记中使用PHP代码的方法，并且用PHP重复所有内容都很难看。有什么想法吗？
我的PHP AJAX代码：
ini_set('display_errors', -1);
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
echo '<pre>';
var_dump($_POST);
echo '</pre>';
}
?>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<form id="getsrc" method="post">
<select name="links" id="links"></select>
</form>
</body>
<script type="text/JavaScript">
//get a reference to the select element
$select = $('#links');
//request the JSON data and parse into the select element
$.ajax({
url: 'links.json',
dataType:'JSON',
success:function(data){
//clear the current content of the select
$select.html('');
//iterate over the data and append a select option
$select.append('<option value="">Please select...</option>');
$.each(data.link, function(key, val){
$select.append('<option value="' + val.name + '">' + val.name + '</option>');
})
},
error:function(){
//if there is an error append a 'none available' option
$select.html('<option id="-1">none available</option>');
}
});
$("#links").change(function(){
this.form.submit();
});
</script>
</html>
我的JSON文件：
{"link": [
{
"id": "1",
"name": "link1.html"
},
{
"id": "2",
"name": "link2.html"
},
{
"id": "3",
"name": "link3.html"
},
{
"id": "4",
"name": "link4.html"
},
{
"id": "5",
"name": "link5.html"
}
]}
共有1个答案
备选案文1：
在提交时也使用AJAX，这样就不会重新加载页面，并且select将根据需要保留先前的值。
$("#links").change(function(){
var $f = $(this).parent('form');
$.post(
'yourServerScript.php',
$f.serialize(), //+ "&a=you-can-attach-extra-params-if-you-like",
function(data, tStatus, xhr){
// do whatever the server response is ...
if (data.success) {
// do whatever you want if you pass success from the server (in result JSON)
} else {
// here you've stated an error, deal with it ...
}
},
'json'
)
})
来自服务器“yourServerScript”的响应。使用post数据的php应返回如下内容：
{“success”：true或false，…处理表单post后要发送的其他数据…}
备选案文2：
您仍然可以正常发送帖子，页面将（重新）从服务器加载表单数据的处理结果，在这种情况下，为了保持选中的值（s）以前选择的值，您再次有多个选项，但我将只向您呈现一个优雅的一：
从处理post和页面呈现的PHP脚本中，您可以在
<form id="getsrc" method="post">
<select name="links" id="links"<?php if(!empty($_POST['links'])) echo 'data-selected="' . $_POST['links'] . '"'; ?>></select>
</form>
然后，在加载JSON并用选项填充select的AJAX脚本中，检查此data select属性
$.ajax({
url: 'links.json',
dataType:'JSON',
success:function(data){
//clear the current content of the select
$select.html('');
//iterate over the data and append a select option
$select.append('<option value="">Please select...</option>');
$.each(data.link, function(key, val){
$select.append('<option value="' + val.name + '"' + (val.name == $select.data('selected') ? ' selected' : '') + '>' + val.name + '</option>');
})
},
error:function(){
//if there is an error append a 'none available' option
$select.html('<option id="-1">none available</option>');
}
});
PS：我看到您将JSON中的名称放在
-
问题内容： 我知道这个问题已经被问过很多次了，但是我已经尝试了好几个小时，却没有任何效果，我是php和ajax的新手，所以，我可能会遗漏一个我不知道的小东西，我想要在这里实现的目的是，我希望用户选择一个食物组，然后基于该组显示配料表。 我单独测试了process.php文件，它运行良好，还测试了脚本，发生了什么事，当我注释掉并键入alert（parent）时，从$ .ajax开头的行不起作用了，我
-
问题内容： 考虑： 提交表单时，如何确保下拉列表中的选定值保持选中状态？此表单位于WordPress（PHP）内部。 问题答案： 为了避免许多if-else结构，让JavaScript自动完成：
-
我希望，如果我选择“mammals”，动物选择选项只显示值为1的选项data-animal_class。 我知道如何获得哺乳动物值，但我不知道如何使用过滤器 这是我的代码：
-
问题内容： 大家好，我有一个联系表格，验证码在那里。提交表格后，我想保留支票。我发布了文本框值，它显示正确，但复选框不起作用。这是我的代码。 提交表格后如何保留复选框？ 问题答案： 更改 至 这将使复选框保持选中状态。
-
我想创建一些表格与自动填充价格在输入框，但我不知道如何实现到我的代码。首先我有选择选项，然后选择选项后，输入框上的价格会自动生成，然后我输入折扣值，然后总价格会自动生成（基本价格-折扣%）。这是我的代码： null null
-
问题内容： 我想设置一个先前选择的要在页面加载时显示的选项。我用以下代码尝试了它： 与 但这是行不通的。有任何想法吗？ 问题答案： 这绝对应该工作。确保已将代码放入：