Question

我想首先感谢你的帮助到目前为止。我已经成功创建了一个ajax请求来显示dropbox中的数据，但是发生的事情是为数据库中的每个项创建一个dropbox。我想要它创建一个包含所有项目的dropbox。然后可以添加另一个dropbox ..

这是我的new_order.php

<div class="page_forms">
    <div class="centered">
        <div class="container-fluid">
            <div class="col-xs-12 col-sm-6 col-sm-offset-3">
                <div class="account-wall">
                    <div class="account-wall-title">
                        Select Products on Order
                    </div>
                    <div class="form-group col-xs-12 col-sm-6 col-sm-offset-3">
                        <a href="#" id="AddMoreFileBox" class="form-control btn btn-info">Add Product</a>
                    </div>
                        <form id="new_order_client_part_2" method="post" action="">

                        <div id="InputsWrapper">

                        <!-- This is where the dropbox will be displayed-->

                        <div style="clear:both"></div>  
                        </div>

                        <div class="new_order_submit col-xs-12 col-sm-6 col-sm-offset-3">
                            <input class="form-control" name="new_order_part_2_submit" type="submit" value="Next">
                        </div>
                        <div style="clear:both"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

这是product_request.php

<?php 
    include ("../core/init.php");

    $result = mysql_query("SELECT * FROM `product`");
    $data = array();
    while ($row = mysql_fetch_array($result)) {
         $data[] = $row;
    }
    echo json_encode($data);

?>

这是我的main.js

$(document).ready(function() {

var MaxInputs       = 8; //maximum input boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#AddMoreFileBox"); //Add button ID


var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added

$(AddButton).click(function (e) {
    if(x <= MaxInputs) {
    FieldCount++;

    $.ajax({                                      
        url: 'ajax/product_request.php', data: "", dataType: 'json',  success: function(rows)        
        {
            for (var i in rows)
            {
                var row = rows[i];          

                var product_id = row[0];
                var product_name = row[1];


                $("#InputsWrapper").append('<div class="col-xs-12"><div class="input-group"><span class="order_quantity input-group-btn"><input class="form-control" type="number" placeholder="Quantity"></span><select id="order_product" class="form-control" name="products[]"><option value="'+product_id+'">'+product_name+'</option></select><span class="input-group-btn removeclass"><button class="btn btn-danger" type="button">X</button></span></div></div><div style="clear:both"></div>');
                x++;
            } 
        } 
    });
}
return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
if( x > 1 ) {
    $(this).parent('div').remove(); //remove text box
    x--; //decrement textbox
}
return false;
}) 
});

所以是的，我知道这个问题出在我的追加中...它正在为每个结果添加下拉框...我真的很困惑我应该怎么写它......

如果你能提供帮助，请提前感谢：）

彼得

Answer 1

PHP代码未在客户端执行，因此当您附加下拉列表时，PHP不会被执行。建议是使用AJAX。我知道我会在评论中得到很多关于此的废话，但我觉得jQuery的AJAX是最容易理解的。您只需将关联数组传递给AJAX函数。例如：

$.ajax({
    url: "script.php", //File you wish to execute
    method: "GET", //Can be GET or POST
    data: "thing=1&thing2=2", //Just like the GET parameters in a URL
    success: function(data) {
        //Do what you want, data is the returned data from the PHP script
    },
});

例如，只需快速查看代码，即可获得＆＃34; order_product＆＃34;选择要添加，将PHP移动到另一个文件，AJAX，并将其追加。你甚至可以将append放在success函数中，或者为更多的依赖选择进行另一个AJAX调用。

或者，如果你想在一次调用中获取所有数据并且只是动态添加内容（不确定这是否是你想要的，但看起来似乎也许），你可以使用jQuery依赖选择。编写自己的文件并不困难，但如果您只是寻找拖放式解决方案，那么就是GitHub：jquery-dependent-selects。祝你好运！

Answer 2

我在HTML代码中看不到#AddMoreFileBox。你错过了什么吗？有了你的问题，我有2种方法可以接近。

您可以使用课程col-xs-12复制第一个div，然后附加到#InputsWrapper
使用您的sql结果，您可以将其分配为javascript变量as Json在当前的php文件中。然后你可以用Json

var data = <?php echo json_encode($sql_result);?>;

Answer 3

我只想首先感谢所有人的帮助......我把它解决了。

这是我的new_order.php

<div class="page_forms">
    <div class="centered">
        <div class="container-fluid">
            <div class="col-xs-12 col-sm-6 col-sm-offset-3">
                <div class="account-wall">
                    <div class="account-wall-title">
                        Select Products on Order
                    </div>
                    <div class="form-group col-xs-12 col-sm-6 col-sm-offset-3">
                        <a href="#" id="AddMoreFileBox" class="form-control btn btn-info">Add Product</a>
                    </div>
                        <form id="new_order_client_part_2" method="post" action="">

                        <div id="InputsWrapper">

                        <!-- This is where the dropbox will be displayed-->

                        <div style="clear:both"></div>  
                        </div>

                        <div class="new_order_submit col-xs-12 col-sm-6 col-sm-offset-3">
                            <input class="form-control" name="new_order_part_2_submit" type="submit" value="Next">
                        </div>
                        <div style="clear:both"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

这是product_request.php

<?php 
    include ("../core/init.php");

    $result = mysql_query("SELECT * FROM `product`");
    $data = array();
    while ($row = mysql_fetch_array($result)) {
         $data[] = $row;
    }
    echo json_encode($data);

?>

这是我的main.js

$(document).ready(function() {

        var MaxInputs       = 8; //maximum input boxes allowed
        var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
        var AddButton       = $("#AddMoreFileBox"); //Add button ID
        var x = InputsWrapper.length; //initlal text box count
        var FieldCount=0; //to keep track of text box added

$(AddButton).click(function (e) {

    if(x <= MaxInputs) {
        FieldCount++;
        $.ajax({                                      
        url: 'ajax/product_request.php', data: "", dataType: 'json',  success: function(rows)        
            {
                var product_id = rows[0];
                var product_name = rows[1];

                var options = $("#order_product_"+ FieldCount +"");

                $.each(rows, function() {
                    options.append($("<option />").val(this.product_id).text(this.product_name));
                });
            } 
        });
        $("#InputsWrapper").append('<div class="col-xs-12"><div class="input-group"><span class="order_quantity input-group-btn"><input class="form-control" type="number" placeholder="Quantity"></span><select id="order_product_'+ FieldCount +'" class="product_on_order form-control" name="products[]"></select><span class="input-group-btn removeclass"><button class="btn btn-danger" type="button">X</button></span></div></div><div style="clear:both"></div>');
        x++;
    }
    return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
    if( x > 1 ) {
        $(this).parent('div').remove(); //remove text box
        x--; //decrement textbox
    };
    return false;
});


});

所有固定和工作的人!!!

彼得

用查询附加php值

3 个答案: