Populating Dropdown dynamically with each dowpdown using ajax PHP

Question

This is my php CodeIgniter Code which is generating 30 Dropdowns which is also populated from database and that is workig absolutly fine. here is the preview of my dropdown list. every list will be populated with the related paraller field.

<?php for($i=1; $i<=30; $i++){ ?>
<div class="form-group c">
    <div class="col-sm-12">
        <div class="input-group">
            <div class="col-xs-12 col-sm-12 <?php if (form_error('iat_code_'.$i)) { echo "has-error";} ?>">
                <?php
                          $itm_iat_codes = $itm_iat_code_1.$i;
                          if(isset($itm_iat_codes)){$itm_iat_codes;}else{$itm_iat_codes = "";}
                          echo form_dropdown(
                              'iat_code_'.$i,
                              $ProductAttributeTitle,'',
                              'class="col-xs-12 col-sm-6 required-field form-control"  
                              id="iat_code_'.$i.'" placeholder="IAT Code" tabindex="1" data-style="form-control" required');
                ?>
            </div>
            <?php echo form_error('iat_code_'.$i, '<div for="iat_code_'.$i.'" class="alert-danger">', '</div>'); ?>
        </div>
    </div>
</div>
<?php    }?>

Here is another Code which is also generating 30 emppty dropdowns and these will be filled up by using ajax. PHP Code

`<?php for($i=1; $i<=30; $i++){ ?>
<div class="form-group c">
    <div class="col-xs-12 col-sm-12">
        <div class="input-group">
            <select name="istbs_code_<?php echo $i; ?>" class="col-xs-12 col-sm-6 required-field form-control" id="istbs_code_<?php echo $i; ?>" placeholder="ISTBS Code" tabindex="1" data-style="form-control">
                <option value="">Select Option</option>
            </select>
        </div>
    </div>
</div>
<?php } ?>`

Here is my ajax code that populates other dropdown from database.

$("#iat_code_1").change(function(){
        var json = {};
        var abc = json['iat_code_1'] = $(this).val();
        var request = $.ajax({
            url: "<?php echo base_url($controller.'/get_product_attributes'); ?>",
            type: "POST",
            data: json,
            dataType: "html",
            success : function(response){
                $("#istbs_code_1").html(response);
            }
        });   
    });

Now problem is that which i'm facing is in ajax, if i'm populating all 30 dropdown with each related for that purpose i've to make 30 ajax functions but i want to make it with only one ajax function, is it posible to do it? if any one know please help.

Answer 1

Here you can fetch all the dropdown data by using single ajax call but after that you need to do client side validation as per requirnment.