Javascript 如何将数据库值传递给动态添加的下拉字段_Javascript_Php

Javascript 如何将数据库值传递给动态添加的下拉字段

javascript php

Javascript 如何将数据库值传递给动态添加的下拉字段,javascript,php,Javascript,Php,我有一个名为new_booking.php的页面和一个名为addmore.php的页面，我需要在new_booking.php中使用addmore.php，当我单击addmore按钮时，它会添加一个动态下拉字段。这里是我的代码快照 </DIV> <SCRIPT> function addMore() { $("<DIV>").load("addmore.php", function() { $

我有一个名为new_booking.php的页面和一个名为addmore.php的页面，我需要在new_booking.php中使用addmore.php，当我单击addmore按钮时，它会添加一个动态下拉字段。这里是我的代码快照

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>


函数addMore（）{
$（“”）加载（“addmore.php”，函数（）{
$（“#product”）.append（$（this.html（））；
}); 
}
函数deleteRow（）{
$（'DIV.product-item'）。每个（功能（索引，项）{
jQuery（':checkbox'，this）.each（函数（）{
如果（$（this）.is（':checked'））{
$（项）.remove（）；
}
});
});
}

现在的问题是，当我单击addmore按钮时，它只是在下拉列表中添加一个文本字段，而没有数据库中的值

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

<DIV class="product-item float-clear" style="clear:both;"> <DIV class="float-left"><input type="checkbox" name="item_index[]" /></DIV>

    <DIV > <select class = "mdl-textfield__input"  id="categories"  name="roomtype[]" >
                  <option value="">Choose Room Type</option>
                          <?php
                               $resultUser = mysqli_query($conn, "SELECT * FROM room_type ");

                                   //$NoRowStaff = mysqli_num_rows($resultStaff);
                                 if ($resultUser->num_rows > 0)


                                // Loop through the query results, outputing the options one by one
                                 while($row = $resultUser->fetch_assoc())  {
                                   echo '<option value="'.$row['rt_id'].'">'.$row['type'].'</option>';
                                }

                          ?>
                                                  </select></DIV> <br><br>

    <DIV> <select class = "mdl-textfield__input" name="roomno" id="subcat" required>
        <option value="" selected>Choose Room number.... </option>   </select></DIV>

    </DIV>


选择房间类型



选择房间号。。。。

如何将数据库中的值附加到新添加的下拉字段中，以便我每次单击addmore按钮时，它都会附带数据库中的值？

您尝试完成此任务的方式将不起作用..因为据我所知，您的代码，您正试图在javascript函数中调用php函数。

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

您可以做的是实现一个ajax函数。

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

过程如下所示： 1.网页中发生事件（单击按钮） 2.Ajax对象向web服务器发送请求 3.服务器处理请求（如从数据库获取值） 4.服务器将响应发送回网页 6.响应由JavaScript读取

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

在此之后，您可以将此值动态附加到选项：）

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

根据评论要求，提供一个简单的演示

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

代码ajaxexample.php

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

<body>
<div id="" class="App-header">
    <h1>This is an AJAX Example</h1>
    <button onClick="addMore()">Add more </button>
    <div id="output">
    <div>
</div>
<script>
function addMore(){
    $.ajax({
        type: "POST",
        url: "addmore.php",
        // data: data, <--- in case you want also send some data to the server like Username etc.
        success: function(data) {               
        $("#output").append(data);
        },
        error: function(){
            // will fire when timeout is reached
             $("#output").html("<h1>connection to the server failed!</h1>");
             },
             timeout: 1200
            });
}
</script>
</body>

<?php
//here you need to put you function for calling the database and return the values that you need
echo "Calling DatabaseRandom Value " . (rand() . "<br>");
?>


这是一个AJAX示例
添加更多
函数addMore（）{
$.ajax({
类型：“POST”，
url:“addmore.php”，
//数据：数据，

您试图完成此任务的方式将不起作用。因为就我所知，您的代码是在javascript函数中调用php函数。您可以做的是实现一个ajax函数。

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

在此之后，您可以将此值动态附加到选项：）

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

根据评论要求，提供一个简单的演示

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

代码ajaxexample.php

    </DIV>


<SCRIPT>
    function addMore() {
        $("<DIV>").load("addmore.php", function() {
                $("#product").append($(this).html());
        }); 
    }
    function deleteRow() {
        $('DIV.product-item').each(function(index, item){
            jQuery(':checkbox', this).each(function () {
                if ($(this).is(':checked')) {
                    $(item).remove();
                }
            });
        });
    }
</SCRIPT>

<body>
<div id="" class="App-header">
    <h1>This is an AJAX Example</h1>
    <button onClick="addMore()">Add more </button>
    <div id="output">
    <div>
</div>
<script>
function addMore(){
    $.ajax({
        type: "POST",
        url: "addmore.php",
        // data: data, <--- in case you want also send some data to the server like Username etc.
        success: function(data) {               
        $("#output").append(data);
        },
        error: function(){
            // will fire when timeout is reached
             $("#output").html("<h1>connection to the server failed!</h1>");
             },
             timeout: 1200
            });
}
</script>
</body>

<?php
//here you need to put you function for calling the database and return the values that you need
echo "Calling DatabaseRandom Value " . (rand() . "<br>");
?>


这是一个AJAX示例
添加更多
函数addMore（）{
$.ajax({
类型：“POST”，
url:“addmore.php”，
//数据：数据，

明天我将用一个完整的php示例编辑我的答案，这样你就可以轻松地为自己使用：）啊，顺便说一句。你使用jquery吗？使这个ajax过程更容易：）明天我将用一个完整的php示例编辑我的答案，这样你就可以轻松地为自己使用：）啊，顺便说一句。你使用jquery吗？使这个ajax过程更容易：）