我想將三個相關選擇框之一添加到我的添加動態字段中（循環中）？

Question

jquery 代碼僅適用於 html 字段。 我如何將相同的過程引入我的動態領域。 你可以參考下面的圖片。

這是我用於表單的index.php文件

<?php
    //Include database configuration file
    include('db_connector.php');

    //Get all Main Category data
    $query = $con->query("SELECT * FROM main_cato ORDER BY cat_name ASC");

    //Count total number of rows
    $rowCount = $query->num_rows;
?>
<div class="form-group">
    <label for="exampleSelect1">Main Category</label>
    <select name="country" id="country" class="form-control">
        <option value="">Select Main Category</option>
        <?php
            if($rowCount > 0){
                while($row = $query->fetch_assoc()){
                    echo '<option value="'.$row['cat_id'].'">'.$row['cat_name'].'</option>';
                }
            }else{
                echo '<option value="">Main Category not available</option>';
            }
        ?>
    </select>

</div>

<div class="form-group">
    <label for="exampleSelect1">Sub Category</label>
    <select name="state" id="state" class="form-control">
        <option value="">Select Sub Category first</option>
    </select>
</div>

<label for="country">Item Description</label>

<div class="form-group">

    <div class="table-responsive">
        <table class="table table-bordered" id="dynamic_field">
            <tr>
                <td><select name="city[]" id="city" class="form-control">
                    <option value="">Select Sub Category first</option>
                </select></td>
                <td><input type="text" name="qty[]" id="qty" placeholder="Quantity" class="form-control name_list" /></td>
                <td><button type="button" name="add" id="add" class="btn btn-primary">Add More</button></td>
            </tr>
        </table>
    </div>

</div>

這是我的 javascript 和 jquery 部分，用於依賴選擇框並在index.php中添加動態字段，我想在我的動態字段中添加一個選擇框（id=city）。

<script>
$(document).ready(function(){
    var i=0;

    $('#add').click(function(){
        i++;
        $('#dynamic_field').append('<tr id="row'+i+'"><td><select name="city1[]" id="city" class="form-control">\n' +
            '                                                        <option value="">Select Sub Category first</option>\n' +
            '                                                    </select></td><td><input type="text"  name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><input type="text" name="qty[]" id="qty" placeholder="Quantity" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');

    });

    $(document).on('click', '.btn_remove', function(){
        var button_id = $(this).attr("id");
        $('#row'+button_id+'').remove();
    });

    $('#submit').click(function(){
        $.ajax({
            url:"./ajax/addReq.php",
            method:"POST",
            data:$('#add_name').serialize(),
            success:function(data)
            {
                alert(data);
                location.reload();
                $('#add_name')[0].reset();
            }
        });
    });




    $(document).ready(function(){
        $('#country').on('change',function(){
            var countryID = $(this).val();
            if(countryID){
                $.ajax({
                    type:'POST',
                    url:'./ajax/ajaxData.php',
                    data:'cat_id='+countryID,
                    success:function(html){
                        $('#state').html(html);
                        $('#city').html('<option value="">Select Sub Category first</option>');
                    }
                });
            }else{
                $('#state').html('<option value="">Select Main Category first</option>');
                $('#city').html('<option value="">Select Sub Category first</option>');
            }
        });

        $('#state').on('change',function(){
            var stateID = $(this).val();
            if(stateID){
                $.ajax({
                    type:'POST',
                    url:'./ajax/ajaxData.php',
                    data:'sub_id='+stateID,
                    success:function(html){
                        $('#city').html(html);

                    }
                });
            }else{
                $('#city').html('<option value="">Select Sub Category first</option>');
            }
        });
    });



});

我有這三個依賴選擇框

我想在我的動態字段中添加標記的選擇字段（黑色）

這是我的 ajax 文件從數據庫中檢索數據到選擇字段ajaxData.php

<?php
include('../db_connector.php');

if(isset($_POST["cat_id"]) && !empty($_POST["cat_id"])){
//Get all state data
$query = $con->query("SELECT * FROM sub_cato WHERE cat_id = ".$_POST['cat_id']." ORDER BY sub_name ASC");

//Count total number of rows
$rowCount = $query->num_rows;

//Display states list
if($rowCount > 0){
    echo '<option value="">Select Sub Category</option>';
    while($row = $query->fetch_assoc()){
        echo '<option value="'.$row['sub_id'].'">'.$row['sub_name'].'</option>';
    }
}else{
    echo '<option value="">Sub Category not available</option>';
}
}

if(isset($_POST["sub_id"]) && !empty($_POST["sub_id"])){
//Get all city data
$query = $con->query("SELECT * FROM items WHERE sub_id = ".$_POST['sub_id']." ORDER BY item_name ASC");

//Count total number of rows
$rowCount = $query->num_rows;

//Display Item list
if($rowCount > 0){
    echo '<option value="">Select Items</option>';
    while($row = $query->fetch_assoc()){
        echo '<option value="'.$row['item_id'].'">'.$row['item_name'].'</option>';
    }
}else{
    echo '<option value="">Item not available</option>';
}
}
?>

Answer 1

這是一個函數，每當#country選擇輸入更改時都會執行，然后將選項插入#state

$( '#country' ).change(function(){

    var selectedValue = $( "#country" ).val(); // gets the value attribute
    var selectedText = $( "#country option:selected" ).text(); // gets the text inside the <option> tag, but probably not needed

    // post selected value to ajaxData, store result in optionsHTML
    $.post("ajaxData.php", { cat_id: selectedValue}, function( optionsHTML ) {

        $( '#state' ).html( optionsHTML ); // replaces HTML contents of <select id="state"> with options echoed by ajaxData.php
    });

    $( '#city' ).html( '<option value="">Select Sub Category first</option>' ); // resets options for #city
});

此函數執行相同的操作以填充第三個選擇字段：

$( '#state' ).change(function(){

    var selectedValue = $( "#state" ).val(); // gets the value attribute

    // post selected value to ajaxData, store result in optionsHTML
    $.post("ajaxData.php", { sub_id: selectedValue}, function( optionsHTML ) {

        $( '#city' ).html( optionsHTML ); // replaces HTML contents of <select id="city"> with options echoed by ajaxData.php
    });
});

您可以通過將未設置的選擇字段標記為禁用或在填充如下行時啟用它們來進一步使用這些功能：

$( '#city' ).attr('disabled', 'disabled'); // add to the first function
$( '#city' ).removeAttr('disabled'); // add to the second function