Question

我正在尝试创建一个下拉列表，该列表由php数据库调用组成，该调用以json格式返回值。第一个函数，jsonload做的是返回包含在字段中的这个json的两个字段。我当时想要做的是将它作为变量传递给子函数，函数的optionload，形式。它将作为字符串添加的位置。然后，这将为我提供该行的下拉列表，然后当我添加其他行时，下拉列表已经完成。

string = '  1234      91          1404  '
print (','.join(string.split()))

这是我的json文件，用于测试

1234,91,1404

我是初学者，感谢我能得到的任何帮助。

Answer 1

有一些问题。

首先，您要在全局范围内创建变量globalVariable，以便将数据从一个函数传输到另一个函数：

//JavaScript Document
var globalVariable;

但是，您正在var回调函数范围内声明另一个名为globalVariable的变量（使用$.getJSON()关键字），并分配给此变量< / em> options的值...而不是全局范围中的变量：

var globalVariable=options;

您的全局globalVariable实际上从未获得任何分配给它的内容。

第二次，虽然如果$.getJSON()返回的速度足够快，代码可能会有效，$.getJSON()是一个异步函数，意味着其他代码，例如$(document).ready()回调将在调用$.getJSON()后继续执行。如果您对http://localhost/test/php/psql.php的请求需要几秒钟才能返回，则用户可能已经点击了添加按钮，但您的选项可能尚未推出。

在将点击处理程序绑定到按钮之前，您可能应该等到返回json数据。

这可以在不使用全局变量的情况下完成：

将forms()功能移出$(document).ready()

将$.getJSON()回调函数中的逻辑放入forms()函数

允许forms()获取参数data

制作forms您的$.getJSON()回调函数

摆脱globalVariable和local并使用options代替

$(document).ready(function jsonload(){ $.getJSON("http://localhost/test/php/psql.php", forms); }); function forms(data){ // Previously in getJSON callback 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); } // no need for globalVariable/local anymore, just use options //var globalVariable=options // Original Forms function 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 optionload(f){ console.log(options); return '<div>Item<input type="text" name="field_name['+f+'][]" value=""/>Material <select name="field_name['+f+'][]"><option value=""></option>' + options + '</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--; }); };

Answer 2

＆＃13;

<!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 = "";
               var data =[
  {
    "POSID": "104",
    "Product": "10 Case Header"
  },
  {
    "POSID": "105",
    "Product": "10 Case Header"
  }
];
        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);
    //});

        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>

＆＃13;

在两个文档javascripts之间传递变量

2 个答案: