Заполнение раскрывающегося списка в строке добавленной таблицы

Question

У меня есть таблица, в которую можно динамически добавлять строки при нажатии кнопки.В каждой динамической строке есть текстовые поля и раскрывающийся список.Раскрывающийся список заполняется из базы данных с использованием jquery и функции в модели

Сценарий

$('td #add_fields').click(function(){
item_count++;
 var url = baseURL+'interfaces/population';
$.ajax({           
   type: "GET",
   url: url,                          
   data:'',                        
   dataType: 'json',                  
   success: function(res){
   $('#item_body').append('<tr id="item_row">'+
     '<th>'+item_count+'</th>'+
     '<td>'+
     '<select class="form-control" id="item_name" name="item_name" style=" width:150px;">'+
     '<option value="none" selected="" disabled="">Select Item</option>');
        for(i in res) 
   $('#item_body').append('<option value="">'+res[i].item_name+'</option>');
   $('#item_body').append('</select>'+
       '</td>'+
       '<td><input type="text" name="qty_unit" id="qty_unit" class="form-control"></td>'+
       '<td><input type="text" name="price_p_u"  id="price_p_u" class="form-control"></td>'+
       '<td>'+
       '</td>'+
       '<td><input type="text" name="qty" id="qty" class="form-control"></td>'+
       '<td><input type="text" name="total_price" id="total_price" class="form-control"></td>'+
       '<td><input type="button" name="" class="btn btn-danger remove_fields" value="X" ></td>'+
       '</tr>');
     } 
 }); });

Модель

public function get_item_data_app(){
$this->db->order_by('item_name');
$query=$this->db->get('stock');
$result=$query->result_array();
return $result;
}

Я могу получить данные для заполнения раскрывающегося списка, однако они не отображаются в раскрывающемся списке.

Изображение1

---

Изображение2

На изображении 1 данные раскрывающегося списка не отображаютсяв раскрывающемся списке, но в другой строке, и я не понимаю, почему это происходит.Но он хотел бы, чтобы он отображался так же, как это видно на изображении 2 при каждом нажатии кнопки.

Answer 1

Как предположили Билал и Риши, проблема заключалась в html-части. В функции добавления к select необходимо было добавить цикл option, а также установить динамические идентификаторы для цикла option, созданного вbutton click

$('td #add_fields').click(function(){
item_count++;
 var url = baseURL+'interfaces/population';
$.ajax({           
        type: "GET",
        url: url,                           
        data:'',
        dataType: 'json',       
        success: function(res){
        $('#item_body').append('<tr id="item_row_add'+item_count+'">'+
        '<th>'+item_count+'</th>'+
        '<td>'+
        '<select class="form-control" id="item_name" name="item_name" style=" width:150px;">'+
        '<option value="none" selected="" disabled="">Select Item</option>');
         for(i in res){ 
        $('#item_row_add'+item_count+' select').append('<option value="'+res[i].id+'">'+res[i].item_name+'</option>');}
        $('#item_row_add'+item_count+'').append('</select>'+
        '</td>'+
        '<td><input type="text" name="qty_unit" id="qty_unit" class="form-control"></td>'+
        '<td><input type="text" name="price_p_u"  id="price_p_u" class="form-control"></td>'+
        '<td>'+
        '<select name="unit-type" id="unit-type" class="form-control" style=" width:90px;">'+
        '<option value="Unit">Unit</option>'+
        '<option value="Sub-Unit">Sub-Unit</option>'+
        '<option>Unit&Sub</option>'+
        '</select>'+
        '</td>'+
        '<td><input type="text" name="qty" id="qty" class="form-control"></td>'+
        '<td><input type="text" name="total_price" id="total_price" class="form-control"></td>'+
        '<td><input type="button" name="" class="btn btn-danger remove_fields" value="X" ></td>'+
        '</tr>');
            } 
 }); });

Answer 2

HTML

        your city :-
                <tr>

                  <select id="state" onchange="getCity()" >
                    <option value="na"  >Select State</option>
                      <?php
                       if (isset($state)) {
                        foreach ($state as $s) {                                            
                         echo '<option value="' . $s->id . '">' . $s->loc. '</option>';
                        }                                      
                      }  ?>
                 </select>

SCRIPT

    function getCity(){

    var state=$('#state').val();

    $.ajax({
        url: "<?php echo base_url() ?>pms1/getCity/"+state, 
        dataType: "json",
        success: function(result){
            $('#city').html('<option>SELECT</option>');
           $.each( result, function( key, value ) {

              $('#city').append('<option value='+key+'>'+value+'</option>');
            });  
    }});

 }

Это работает с Onchange (), то, что вы, возможно, делаете неправильно, должно быть частью HTML.