jQuery从数据库动态添加组合框

Question

我想在点击时动态添加组合框。

但是combobox是从数据库中获取的。

<select name="articleNo" id="articleNo">
    <option value="">Choose Article No.</option>
    <?php
    $qArticle = oci_parse($c1, "SELECT * FROM WA_LA_TBL_ARTICLES WHERE ACTIVE = 'Y' ORDER BY ARTICLE_NO ASC");
    oci_execute($qArticle);

    require("../config/db_prd.php");

    while($dArticle = oci_fetch_array($qArticle))
    {
        $qModel = oci_parse($c1, "
            SELECT
            M.SEGMENT1,
            M.DESCRIPTION,
            C.INVENTORY_ITEM_ID,
            C.CATEGORY_SET_ID,
            C.CATEGORY_ID,
            K.CATEGORY_ID,
            K.CONCATENATED_SEGMENTS
            FROM
            MTL_SYSTEM_ITEMS M,
            MTL_ITEM_CATEGORIES C,
            MTL_CATEGORIES_B_KFV K
            WHERE
            M.INVENTORY_ITEM_ID = C.INVENTORY_ITEM_ID AND
            K.CATEGORY_ID = C.CATEGORY_ID AND
            M.ITEM_TYPE IN ('FG') AND
            M.INVENTORY_ITEM_STATUS_CODE = 'Active' AND
            K.CONCATENATED_SEGMENTS LIKE 'WH3-LEG-DIR' AND
            C.INVENTORY_ITEM_ID = '" . $dArticle['INVENTORYID_FK'] . "'
        ");
        oci_execute($qModel);
        $dModel = oci_fetch_array($qModel);
        ?>
        <option value="<?php echo $dArticle['ARTICLEID']; ?>"><?php echo $dModel['DESCRIPTION']; ?></option>
    <?php
    }
    ?>
</select>

和动态添加的jQuery

$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})
});

在该jQuery上，您可以看到它将动态显示textbox。我想要的是从数据库中动态添加组合框。

您可以在演示中使用textbox动态引用此link。

Answer 1

一种方法(我不知道这是否是最好的方法)是用您的combobox代码创建一个PHP文件，然后在add_button单击函数中调用AJAX函数，然后在AJAX success: function()中将结果附加到包装器中。

查看代码以更好地理解

Combobox.php

<select name="articleNo" id="articleNo">
<option value="">Choose Article No.</option>
<?php
$qArticle = oci_parse($c1, "SELECT * FROM WA_LA_TBL_ARTICLES WHERE ACTIVE = 'Y' ORDER BY ARTICLE_NO ASC");
oci_execute($qArticle);

require("../config/db_prd.php");

while($dArticle = oci_fetch_array($qArticle))
{
    $qModel = oci_parse($c1, "
        SELECT
        M.SEGMENT1,
        M.DESCRIPTION,
        C.INVENTORY_ITEM_ID,
        C.CATEGORY_SET_ID,
        C.CATEGORY_ID,
        K.CATEGORY_ID,
        K.CONCATENATED_SEGMENTS
        FROM
        MTL_SYSTEM_ITEMS M,
        MTL_ITEM_CATEGORIES C,
        MTL_CATEGORIES_B_KFV K
        WHERE
        M.INVENTORY_ITEM_ID = C.INVENTORY_ITEM_ID AND
        K.CATEGORY_ID = C.CATEGORY_ID AND
        M.ITEM_TYPE IN ('FG') AND
        M.INVENTORY_ITEM_STATUS_CODE = 'Active' AND
        K.CONCATENATED_SEGMENTS LIKE 'WH3-LEG-DIR' AND
        C.INVENTORY_ITEM_ID = '" . $dArticle['INVENTORYID_FK'] . "'
    ");
    oci_execute($qModel);
    $dModel = oci_fetch_array($qModel);
    ?>
    <option value="<?php echo $dArticle['ARTICLEID']; ?>"><?php echo $dModel['DESCRIPTION']; ?></option>
<?php
}
?>
</select>

jQuery：

$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
    x++; //text box increment
    $.ajax({
    url : 'combobox.php',
    dataType : 'html',
    //Other AJAX call details
    success : function(response){
       $(wrapper).append(response); //Combobox Added
    }
    });
}
});

希望这能有所帮助