テーブルに行を追加する処理と同時にサーバから取得したデータをもとにプルダウンを追加しようと思います。
サーバからのデータ取得はうまくいっています。
ところが、プルダウン(pd1)の表示がうまくいかずに困っています。
pd2 は問題なく表示されています。
$('#add_row').click(function(){ var len = $("#table tbody").children().length; var pd1 = ""; pd1 = '<select name="dest' + len + '" id="dest' + len + '" class="form-control">'; $.ajax({ type: "POST", url: "/KU001", dataType: "json", success: function(data, status){ $.each(data,function(i) { $('#dest' + len ).append($('<option>').attr({ value: i }).text(data[i])); }); }, error: function(XMLHttpRequest, status, errorThrown){ alert("エラーが発生しました!"); } }); pd1 += '</select>'; if(len>19){ $("#table").attr("disabled","disabed"); } var pd2 =""; pd2 = '<select name="pato' + len + '" id="pato' + len + '" class="form-control">'; pd2 += '<option value="-----">選択されていません</option>'; pd2 += '</select>'; data = '<tr><td>' + pd1 + '</td><td>' + pd2 +'</td><td><input type="text" name="note' + (len+1) +'" class="note" /></td><td><input type="button" name="add_pts' + (len+1) +'" value="登録" class="add" /></td></tr>'; $('#table').append(data); });
簡略化したHTMLです。
<div class="table-responsive"> <table class="table" id="table"> <tbody> <tr><th>項目1</th><th>項目2</th><th>備考</th><th></th></tr> <tr> <td> <select name="dest1" id="dest1" class="form-control"> <option value ="-----">選択してください</option> <option value ="01">項目1</option> <option value ="02">項目2</option> </select> </td> <td> <select name="pato1" id="pato1" class="form-control"> <option value ="-----">選択してください</option> </select> </td> <td><input type="text" name="note1" class="note" /></td> <td><input type="button" value="登録" class="add" /></td> </tr> </tbody> </table> </div> <p class="text-right"><button id="add_row">行を追加する</button> <button id="del_bottom">行を削除する</button></p>
どこが原因か分からず困っています。
ご教授頂ければ幸いです。
宜しくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。