1
我正在尝试创建一个由php数据库调用组成的下拉列表，该列表以json格式返回值。 jsonload所做的第一个功能是返回包含在字段中的这个json的两个字段。 然后我想要做的是将这个作为一个变量传递给子函数，函数的optionload，形式。它将作为字符串添加到哪里。这会给我我的下拉列表，然后当我添加额外的行时，下拉列表已经完成。在两个文件之间传递一个变量javascripts
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Form</title>
</head>
<body>
<form name="codexworld_frm" id="form1" method="post">
<div class="field_wrapper">
<div>
<h3><a href="javascript:void(0);" class="add_button" title="Add Field">Add POS Item</a> </h3>
</div>
</div>
<input type="submit" value="Submit">
</form>
</body>
<script type="text/javascript">
// JavaScript Document
var globalVariable;
$(document).ready(function jsonload(data){
$.getJSON("http://localhost/test/php/psql.php", function(data)
{
var options = "";
for (var i = 0; i < data.length; i++)
{
options +="<option value=\"" + data[i].POSID + "\">" + data[i].Product + "</option>";
//console.log(data[i].POSID + " " + data[i].Product);
}
var globalVariable=options;
console.log(globalVariable);
});
});
$(document).ready(function forms(){
var maxField = 50; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
//var fieldHTML = {row :function(f){
//return '<h3><div>Item <input type="text" name="field_name['+f+'][]" value=""/>Material <input type="text" name="field_name['+f+'][]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove Field"><i class="material-icons" style="font-size:24px; color:blue">remove_circle</i></a></div></h3>';
//}};
var fieldHTML = {row :function optionload(f){
var local = globalVariable;
console.log(local);
//event.preventDefault();
return '<div>Item<input type="text" name="field_name['+f+'][]" value=""/>Material <select name="field_name['+f+'][]"><option value=""></option>' + local + '</select><a href="javascript:void(0);" class="remove_button" title="Remove Field"><i class="material-icons" style="font-size:24px; color:blue">remove_circle</i></a></div>';
}};
var x = 1; //initial field counter is 1
$(addButton).click(function(){ //Once add button is clicked
if(x < maxField){
x++;
$(wrapper).append(fieldHTML.row(x)); //Add field html
}
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
e.preventDefault();
$(this).parent('div').remove(); //remove field html
x--;
});
});
</script>
</html>
这是我的JSON文件，用于测试
[
{
"POSID": "104",
"Product": "10 Case Header"
},
{
"POSID": "105",
"Product": "10 Case Header"
}
]
我是一个初学者，感谢所有帮助我能。
谢谢您的回答切斯特。我对JavaScript非常陌生，非常感谢您的帮助，并对我的代码中的问题进行了解释。 –
当我在我的页面中运行此功能时，我注意到添加按钮不再起作用。感谢您解释我的代码中的错误。 –