我有以下表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populate City Dropdown Using jQuery Ajax</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select.countr").change(function(){
var selectedCountry = $(".countr option:selected").val();
$.ajax({
type: "POST",
url: "countries.php",
data: { country : selectedCountry }
}).done(function(data){
$("#response").html(data);
});
});
});
</script>
</head>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<table>
<tr>
<td>
<label>Country:</label>
<select class="countr">
<option>Select</option>
<option value="usa">United States</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
</select>
</td>
<td id="response">
<select class="response">
</select>
</td>
</tr>
</table>
<input type="submit" name="submit">
</form>
</body>
</html>以及以下 php 代码
<?php
if(isset($_POST["country"])){
// Capture selected country
$country = $_POST["country"];
var_dump($country);
// Define country and city array
$countryArr = array(
"usa" => array("New York", "Los Angeles", "California"),
"india" => array("Mumbai", "New Delhi", "Bangalore"),
"uk" => array("London", "Manchester", "Liverpool")
);
// Display city dropdown based on country name
if($country !== 'Select'){
echo "<label>City:</label>";
echo "<select>";
foreach($countryArr[$country] as $value){
echo "<option>". $value . "</option>";
}
echo "</select>";
}
}
if(isset($_POST['submit']))
{
var_dump($_POST);
}
?>
ajax返回数据并填充select选项。
问题是当我提交表单时，发布数据是空的，当我检查选项的源代码时，即使创建了下拉列表，也不存在。
我做错了什么...
最佳答案
第一: select 标记缺少 name 属性
echo "<select name='what_ever_you_want'>";
注意:没有 name 属性 元素将被 form 忽略。它不会发送到服务器
第二个:缺少选项value属性
echo "<option value='". $value . "'>". $value . "</option>";
第三: !!重要!!将此 if 语句 if($country !== 'Select'){ } 更改为 if($country !=''){ }
if($country != ''){
echo "<label>City:</label>";
echo "<select name='city'>";
foreach($countryArr[$country] as $value){
echo "<option>". $value . "</option>";
}
echo "</select>";
}
测试1: done(function(data){ console.log(data); }); 放置此代码并确认ajax返回数据或不
关于javascript - 我有一个通过 ajax 调用返回选择选项的表单，但是当我保存后值不会显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45049676/