bugfix> php > 投稿

ボタンをクリックすると行を動的に追加できるテーブルがあります。各動的行には、テキストフィールドとドロップダウンリストがあります。ドロップダウンは、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

image1から、ドロップダウンリストのデータはドロップダウンリストではなく別の行に表示されており、なぜそうなっているのかわかりません。ただし、ボタンがクリックされるたびに、image2に表示されるように表示されるようにします。

回答 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>
    
    

    脚本

       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の部分でなければなりません。

  • BilalとRishiが示唆したように、問題はhtml部分でした。append関数では、ループする option   select に追加する必要がありました  また、ループする option のidを動的に設定します 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>');
                } 
     }); });
    
    

あなたの答え