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非常陌生，非常感謝您的幫助，並對我的代碼中的問題進行了解釋。 –
當我在我的頁面中運行此功能時，我注意到添加按鈕不再起作用。感謝您解釋我的代碼中的錯誤。 –