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

我能够将数据填充到列表的下拉列表中，但是，它没有显示在下拉列表中。

IMAGE1

图像2

从image1开始，下拉列表数据不会显示在下拉列表中，而是显示在另一行上，我不明白为什么会这样做。但它希望它显示就像在按下单击按钮时在image2中看到的一样。

Answer 1

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部分。

Answer 2

就像Bilal和Rishi建议的那样，问题是html部分。在追加功能中，循环option必须附加到select并且还要设置动态ids＆＃39;用于在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>');
            } 
 }); });

填充附加表行中的下拉列表

2 个答案: