问题描述
在这里，我正在使用Java脚本和Ajax创建动态条件下拉列表。
PHP：Add.php
<html>
<head>
<title>Add Data</title>
</head>
<body>
<?php
//including the database connection file
include_once("config.php");
if(isset($_POST['Submit'])) {
$name = mysqli_real_escape_string($mysqli,$_POST['name']);
$department = mysqli_real_escape_string($mysqli,$_POST['department']);
$type = mysqli_real_escape_string($mysqli,$_POST['type']);
$priority = mysqli_real_escape_string($mysqli,$_POST['priority']);
$totalcredit = mysqli_real_escape_string($mysqli,$_POST['totalcredit']);
$reqdate = mysqli_real_escape_string($mysqli,$_POST['reqdate']);
$notes = mysqli_real_escape_string($mysqli,$_POST['notes']);
// checking empty fields
if(empty($name) || empty($department) || empty($type) || empty($priority) || empty($totalcredit) || empty($reqdate) || empty($notes)){
if(empty($name)) {
echo "<font color='red'>Name of Request field is empty.</font><br/>";
}
if(empty($department)) {
echo "<font color='red'>Requested department is empty.</font><br/>";
}
if(empty($type)) {
echo "<font color='red'>Type of request field is empty.</font><br/>";
}
if(empty($priority)) {
echo "<font color='red'>Precedence field is empty.</font><br/>";
}
if(empty($totalcredit)) {
echo "<font color='red'>Total Credit field is empty.</font><br/>";
}
if(empty($reqdate)) {
echo "<font color='red'>Requested Date field is empty.</font><br/>";
}
if(empty($notes)) {
echo "<font color='red'>Notes field is empty.</font><br/>";
}
//link to the previous page
echo "<br/><a href='javascript:self.history.back();'>Go Back</a>";
}
else {
// if all the fields are filled (not empty)
//insert data to database
$result = mysqli_query($mysqli,"INSERT INTO creditDetails(`Name`,`Department`,`Type`,`Priority`,`TotalCredit`,`ReqDate`,`Notes`) VALUES ('$name','$department','$type','$priority','$totalcredit','$reqdate','$notes')");
//display success message
echo "<font color='green'>Data added successfully.";
echo "<br/><a href='index.php'>View Result</a>";
}
}
?>
</body>
</html>
HTML：add.html
<html>
<head>
<title>Add Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<a href="index.php">Home</a>
<br/><br/>
<form action="add.php" method="post" name="form1">
<table width="25%" border="0">
<tr>
<td>Name of the Request</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Dep</td>
<td><input type="text" name="department"></td>
</tr>
<tr>
<td>Type of Request</td>
<td>
<select name="type" id="type">
<option value="">Select type</option>
</select>
</td>
</tr>
<tr>
<td>Degree of Precedence</td>
<td>
<select name="priority" id="priority">
<option value="">Select precedence level</option>
</select>
</td>
</tr>
<tr>
<td>Total for order</td>
<td>
<select name="totalcredit" id="totalcredits">
<option value="">Select credits</option>
</select>
</td>
</tr>
<tr>
<td>Date of Request</td>
<td><input type="date" name="reqdate"></td>
</tr>
<tr>
<td>Notes</td>
<td><textarea type="text" name="notes"> </textarea></td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Add"></td>
</tr>
</table>
</form>
</body>
</html>
JS：
$(document).ready(function(){
load_json_data('type');
function load_json_data(id,parent_id)
{
var html_code = '';
$.getJSON('options.json',function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data,function(key,value){
if(id == 'type')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change','#type',function(){
var type_id = $(this).val();
if(type_id != '')
{
load_json_data('priority',type_id);
}
else
{
$('#priority').html('<option value="">Degree of Precedence</option>');
$('#totalcredit').html('<option value="">Total Credits used for order</option>');
}
});
$(document).on('change','#priority',function(){
var priority_id = $(this).val();
if(priority_id != '')
{
load_json_data('totalcredits',priority_id);
}
else
{
$('#totalcredit').html('<option value="">Total Credits used for order</option>');
}
});
});
JSON数据：
[
{
"id":"1","name":"New Image","parent_id":"0"
},{
"id":"2","name":"Archive Image",{
"id":"3","name":"Map",{
"id":"4","name":"Agreed and Changed Image",{
"id":"5","name":"Standard","parent_id":"1"
},{
"id":"6","name":"priority",{
"id":"7","name":"Urgent",{
"id":"8","name":"Dedicated",{
"id":"9","name":"DT",{
"id":"10","name":"bus Archive","parent_id":"2"
},{
"id":"11","name":"AS Archive",{
"id":"12","name":"None","parent_id":"3"
},{
"id":"13","parent_id":"4"
},{
"id":"14","name":"1","parent_id":"5"
},{
"id":"15","name":"2","parent_id":"6"
},{
"id":"16","name":"3","parent_id":"7"
},{
"id":"17","name":"4","parent_id":"8"
},{
"id":"18","name":"5.5","parent_id":"9"
},{
"id":"19","name":"11",{
"id":"20","name":"16.5",{
"id":"21","name":"22",{
"id":"22","name":"27.5",{
"id":"23","name":"33",{
"id":"24","name":"38.5",{
"id":"25","name":"44",{
"id":"26","name":"49.5",{
"id":"27","name":"55",{
"id":"28","name":"0","parent_id":"10"
},{
"id":"29","parent_id":"11"
},{
"id":"30","parent_id":"12"
},"parent_id":"13"
}
]
上面的脚本可以工作，但是当通过提交发布表单时，ids而不是名字发布到数据库中
例如。
{
"id":"10","parent_id":"2"
}
从上述json数据中， 10 被保存到数据库中，而不是 总线归档文件
解决方法
尝试将您的JS函数更改为此：
function load_json_data(id,parent_id) {
var html_code = "";
$.getJSON("options.json",function (data) {
html_code += '<option value="">Select ' + id + "</option>";
$.each(data,function (key,value) {
if (id == "type") {
if (value.parent_id == "0") {
html_code +=
'<option value="' + value.name + '">' + value.name + "</option>";
}
} else {
if (value.parent_id == parent_id) {
html_code +=
'<option value="' + value.name + '">' + value.name + "</option>";
}
}
});
$("#" + id).html(html_code);
});
}