Question

我的下拉列表列出了食物类型，一旦选择了一个项目，就会显示另一个下拉列表并填充相关食物（使用 jQuery 和AJAX从数据库中获取）。

现在，当我添加另一个字段（用于多个选择）时，从上一个下拉列表中选取的类型会转移到影响两个字段的附加下拉列表。这必须与操作数组有关，但我似乎无法理解它的逻辑和代码结构。

这是我的代码： HTML

<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" id="orderStrip">
    <a href="" id="addStrip">Add Row</i></a>
    <form action="phpfunctions/ReservationManagement/addReserve.php" method="post" id="addOrderForm">
        <div>
        <select name="type[]" class="selectOrder">
        <option value="">Choose a type</option>
        <option value="single_lunch">Single Order Lunch</option>
        <option value="toppings_lunch">Rice Toppings</option>
        <option value="extra_lunch">Extras Lunch</option>
        <option value="single_bfast">Single Order Breakfast</option>
        <option value="budget_bfast">Budget Order Breakfast</option>
        <option value="extra_bfast">Extras Breakfast</option>
        <option value="carbon_drink">Carbonated/Fizzy Drinks</option>
        <option value="non_carbon_drink">Non-Fizzy Drinks(Juice/Milk/Water)</option>
        <option value="breads_confection">Breads/Biscuits Confection(M.Y.SAN/Lemon Square, etc..)</option>
        <option value="sweets_confection">Candies and Sweets Confection</option>
        <option value="packed_snacks">Packed Snacks(Chippy, Piatos, etc..)</option>
        <option value="cooked_snacks">Cooked Snacks(Turon, Hotdog, etc..)</option>
        </select>
        <select name="item[]" class="selectItem">
        <option> Choose a type first </option>
        </select>
        <input type="number" class="quantity" name="quantity[]" placeholder="Qauntity">
        <input type="number" name="total[]" class="total"></input>
        <a class="removeStrip"><i class="fa fa-times"></i></a>
        </div>
    </form>
</div>

JQuery和Ajax：

$(document).ready(function(){
    var insert = 1;
    $("#addStrip").click(function(e){
        e.preventDefault();
    $("#addOrderForm").append('<div><select name="type[]" class="selectOrder"> <option value="">Choose a type</option> <option value="single_lunch">Single Order Lunch</option> <option value="toppings_lunch">Rice Toppings</option> <option value="extra_lunch">Extras Lunch</option> <option value="single_bfast">Single Order Breakfast</option> <option value="budget_bfast">Budget Order Breakfast</option> <option value="extra_bfast">Extras Breakfast</option> <option value="carbon_drink">Carbonated/Fizzy Drinks</option> <option value="non_carbon_drink">Non-Fizzy Drinks(Juice/Milk/Water)</option> <option value="breads_confection">Breads/Biscuits Confection(M.Y.SAN/Lemon Square, etc..)</option> <option value="sweets_confection">Candies and Sweets Confection</option> <option value="packed_snacks">Packed Snacks(Chippy, Piatos, etc..)</option> <option value="cooked_snacks">Cooked Snacks(Turon, Hotdog, etc..)</option> </select> <select name="item[]" class="selectItem"> <option> Choose a type first </option> </select> <input type="number" class="quantity" name="quantity[]" placeholder="Qauntity"> <input type="number" name="total[]" class="total"></input> <a class="removeStrip"><i class="fa fa-times"></i></a></div>');
        insert ++;
        alert(insert);
    });
    $(document).on('click', '.removeStrip', function(f) {  f.preventDefault();
            alert("remove");
            $(this).parent('div').remove();
            insert--; });

});
$(document).on("change", ".selectOrder", function() {
    var list = $(".selectOrder").val();
        $.ajax({
        url:"phpfunctions/MenuManagement/getMenu.php?filter="+list+"&action=fetch",
        success:function(data){
        $('.selectItem').html("<option>Select a menu item</option>"+data);
        }
    });
});
$(document).on("keyup", ".quantity", function() {
    var list = $(".selectOrder").val();
    var item = $(".selectItem").val();
        $.ajax({
        url:"phpfunctions/MenuManagement/getMenu.php?filter="+list+"&compute="+item,
        success:function(data){
        $('.total').val(data*$(".quantity").val());
        }
    });
});

最后，PHP：

if (!(isset($_GET["filter"]))){
    $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
    $result=$con->query("SELECT * FROM tbl_items WHERE status = 'Available' ORDER BY name");
}else{
    if(!(isset($_GET["compute"]))){
        if ($_GET["filter"]=="single_lunch"){
        $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
        $result=$con->query("SELECT * FROM tbl_items WHERE type = 'single_lunch' AND status = 'Available' ORDER BY name");

    }else if($_GET["filter"]=="toppings_lunch"){
        $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
        $result=$con->query("SELECT * FROM tbl_items WHERE type = 'budget_lunch' AND status = 'Available' ORDER BY name");

    }else if($_GET["filter"]=="extra_lunch"){
        $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
        $result=$con->query("SELECT * FROM tbl_items WHERE type = 'extra_lunch' AND status = 'Available' ORDER BY name");

    }else if($_GET["filter"]=="budget_bfast"){
        $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
        $result=$con->query("SELECT * FROM tbl_items WHERE type = 'budget_bfast' AND status = 'Available' ORDER BY name");

    }else if($_GET["filter"]=="single_bfast"){
        $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
        $result=$con->query("SELECT * FROM tbl_items WHERE type = 'single_bfast' AND status = 'Available' ORDER BY name");

    }else if($_GET["filter"]=="extra_bfast"){
        $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
        $result=$con->query("SELECT * FROM tbl_items WHERE type = 'extra_bfast' AND status = 'Available' ORDER BY name");

    }else if($_GET["filter"]=="carbon_drink"){
        $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
        $result=$con->query("SELECT * FROM tbl_items WHERE type = 'carbon_drink' AND status = 'Available' ORDER BY name");

    }else if($_GET["filter"]=="non_carbon_drink"){
        $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
        $result=$con->query("SELECT * FROM tbl_items WHERE type = 'non_carbon_drink' AND status = 'Available' ORDER BY name");

    }else if($_GET["filter"]=="breads_confection"){
        $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
        $result=$con->query("SELECT * FROM tbl_items WHERE type = 'breads_confection' AND status = 'Available' ORDER BY name");

    }else if($_GET["filter"]=="sweets_confection"){
        $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
        $result=$con->query("SELECT * FROM tbl_items WHERE type = 'sweets_confection' AND status = 'Available' ORDER BY name");

    }else if($_GET["filter"]=="packed_snacks"){
        $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
        $result=$con->query("SELECT * FROM tbl_items WHERE type = 'packed_snacks' AND status = 'Available' ORDER BY name");

    }else if($_GET["filter"]=="cooked_snacks"){
        $con=new PDO("mysql:host=localhost; dbname=db_canteen","root","");
        $result=$con->query("SELECT * FROM tbl_items WHERE type = 'cooked_snacks' AND status = 'Available' ORDER BY name");

    }
    if(isset($_GET["action"])){
        $rows=$result->rowCount();
        if ($rows > 0){
        while($row=$result->fetch(PDO::FETCH_ASSOC)){
        echo '<option value="'.$row["name"].'">'.$row["name"].'</option>';
            }
        }else{
            echo '<option>No results to display</option>';
        }

以下是它的外观，对不起，imgur需要很长时间才能为我加载。 http://oi66.tinypic.com/2dsej4n.jpg http://oi66.tinypic.com/307xo8y.jpg

哦，请原谅我糟糕的编码意识，优化和缺乏设计。我想先完成每个基本功能，而且我还是初学者。谢谢！

Answer 1

我不确定我完全理解你的问题，但我认为就在这里：

var list = $(".selectOrder").val();

您正在按类名选择值，但我想您应该使用this关键字来选择，以便从更改的选择中获取值。 var list = $(this).val();

并将值设置为选择：

$('.selectItem').html("<option>Select a menu item</option>"+data);

将是：

$(this).next().html("<option>Select a menu item</option>"+data);

这是你需要的吗？

Dynamicaly使用jQuery插入select元素

1 个答案: