追加テーブル行のドロップダウンリストへの入力

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に表示されるように表示されるようにします。

php

jquery

ajax

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

あなたの答え

関連記事