我想将三个相关选择框之一添加到我的添加动态字段中（循环中）？

Question

jquery codes are working only in html fields. how ii get that same process in to my dynamic field. you can refer the images below.

Here is my index.php file for form

<?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>

Here is my javascript and jquery section for depend select box and add dynamic field include in index.php i want to add one select box(id=city) in my dynamic field.

<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>');
            }
        });
    });



});

i have this three dependent select box

I want to add marked select field(black color) in to my dynamic field

Here is my ajax file retrieve data from database to Select fields 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

Here's a function that will execute whenever the #country select input is changed, and then inserts the options into #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
});

This function does the same to populate the third select field:

$( '#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
    });
});

You could take these functions a little further by marking the unset select fields as disabled or enabling them when populated with lines like this:

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