ボタンをクリックすると行を動的に追加できるテーブルがあります。各動的行には、テキストフィールドとドロップダウンリストがあります。ドロップダウンは、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 件
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>'); } }); });
関連した質問
- ajaxコールバック後にインクリメントカウンターが機能しない
- PHPのURLではなく履歴書にソーシャルアイコンを表示する方法は?
- ボタンを最初に使用した後、jQueryがデータIDを返さない
- 初心者の質問:サーバー時間に基づく静的カウントダウンタイマー
- AJAX:400の悪いリクエスト
- 検索ボックス(AJAX)は要求されたデータをロードしません
- PHPとAjaxを使用して動的テーブルを作成してデータをテーブルに挿入します。ビューまたは最初のページ内にない場合はボタンを使用できません
- phpajaxを使用してDatatableが明確ではない
- 配列とオブジェクトを受け取った場合にjQueryでphpからデータを解析する方法
- JSONからドロップダウンを入力します
HTML
脚本
これはOnchange()で機能します。間違っている可能性があるのはHTMLの部分でなければなりません。