Question

我正在尝试使用Jquery将带有产品和价格的动态行添加到订单表单中。问题是我需要从mysql动态填充产品下拉列表。行正确添加。我唯一的问题是，下拉菜单只有一个选项，该选项显示为“未定义”。

编辑1：我更改了PHP代码。我认为它现在格式正确但我仍然在我的选择列表中得到“未定义”。

编辑2：我测试了php并且有一些错误。现在php完全独立工作并返回以下json编码数组，但是当我试图将它拉入我的jquery脚本时，它仍然返回一个“未定义”的结果。：

[{"product":"wedding 4","price":"400.00","id":"9"},
 {"product":"wedding 2 ","price":"400.00","id":"8"},
 {"product":"Wedding 1","price":"4000.00","id":"1"},
 {"product":"potato","price":"50.00","id":"6"},
 {"product":"Event","price":"3000.00","id":"5"},
 {"product":"alligator","price":"800.00","id":"7"}]

jQuery的：

var count = 0;
$(document).ready(function(){
$('p#add_field').click(function(){
    count += 1;
    $('#addingContainer').append('<strong>Link #' + count + '</strong><br />' + '<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" >');

$.get('includes/productrow.php', function(data){
$('#product_' + count + '').append('<option value=' + data.product_id + ' data-price=' + data.price + '>' + data.product +'</option>');
});

$('#addingContainer').append('</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" >');
});

productrow.php

<?php  
    $productSql = "SELECT product_id, product, price FROM products WHERE compid = '$compid' ORDER BY product desc";
    $productResult = mysql_query($productSql, $link);

    while($productRow = mysql_fetch_array($productResult)){
    $final_array[] = array("product" => $productRow['product'], "price" =>   $productRow['price'], "id" => $productRow['id']);
    };

    echo json_encode($final_array);


?>

**免责声明，我知道我应该使用PDO，一旦这个项目完成，我将开始使用它。

Answer 1

我总是使用jquerys $ .get：

$.get('includes/productrow.php', function(resp){
   $('#yourid').append(resp);
});

尝试实施此操作。

像这样使用：

$.get('includes/productrow.php', function(resp){
   $('#addingContainer').append('<strong>Link #' + count + '</strong><br />' + '<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" /><option value=""></option>' + resp + '</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" >');
});

希望这有效！

我制作了以下文件进行测试：

<html>
    <head>
    <script type="text/javascript" src="../server/public/js/jquery.js"></script>
    <script type="text/javascript">
        $.get('productrow.php', function(resp){
               $('body').append('<strong>Link #</strong><br />' + '<label>Product or Service</label><select id="product_" name="products[]'+ '" /><option value=""></option>' + resp + '</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_" name="prices[]' + '" class="price" >');
        });
    </script>
    </head>
    <body>

    </body>
</html>

productrow.php：

<?php
echo "test";

结果：

Link #
Product or Servicetest  Price

测试按预期进行。你能把你的全部代码发给我，还是创建一个jsfiddle

Answer 2

问题出在JSON请求中。更正后的代码如下。此代码还允许使用data-price属性自动填充产品价格的文本字段：

Jquery的：

var count = 0;

$(document).ready(function(){

$('p#add_field').click(function(){

    count += 1;

    $('#addingContainer').append('<strong>Link #' + count + '</strong><br />' + '<label>Product or Service</label><select id="product_' + count + '" name="products[]'+ '" ><option value=""></option>');

    $.getJSON('includes/productrow.php', function(data){
            var select = $('#product_' + count + '');
            $.each(data, function(key, val) {
                $('<option/>').attr('value', val.product_id)
                              .attr('data-price', val.price)
                              .html(val.product)
                              .appendTo(select);
    });

    $('#addingContainer').append('</select>&nbsp;&nbsp;<label>Price</label><input type="text" id="price_' + count + '" name="prices[]' + '" class="price" >');
    });

productrow.php

$productSql = "SELECT product_id, product, price, compid FROM products WHERE compid = '$compid' ORDER BY product desc";
$productResult = mysql_query($productSql, $link);

while($productRow = mysql_fetch_array($productResult)){
$final_array[] = array("product" => $productRow['product'], "price" =>     $productRow['price'], "id" => $productRow['product_id']);
};

echo json_encode($final_array);

尝试动态填充选择列表时，Json结果为“未定义”

2 个答案: