1
json形式で値を返すPHPデータベース呼び出しから構成されたドロップダウンリストを作成しようとしています。最初の関数jsonloadは、このjsonの2つのフィールドをフィールドにラップして返します。 私はこれを変数として関数subfunction、formload、formに渡します。どこに文字列として追加されますか。これにより、その行のドロップダウンリストが表示されます。さらに行を追加すると、ドロップダウンリストは既に完成しています。2つのドキュメントJavaScript間で変数を渡す
<!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>
これは
[
{
"POSID": "104",
"Product": "10 Case Header"
},
{
"POSID": "105",
"Product": "10 Case Header"
}
]
をテストするために、私は初心者です、と私は得ることができます任意の助けに感謝、私のJSONファイルです。
を
optionsを使用取得は、あなたの答えのチェスターいただきありがとうございます。私は非常にjavascriptに新しいと私のコードであなたの助けと問題の説明を感謝します。 –私のページでこの機能を実行すると、追加ボタンが機能しなくなったことがわかります。私のコードの不具合について説明してくれてありがとう。 –