質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.03%

行を追加するボタンを押して行にプルダウンを設定したいのですがうまくいきません。

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,060

score 189

テーブルに行を追加する処理と同時にサーバから取得したデータをもとにプルダウンを追加しようと思います。
サーバからのデータ取得はうまくいっています。
ところが、プルダウン(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>&nbsp;&nbsp;<button id="del_bottom">行を削除する</button></p>


どこが原因か分からず困っています。
ご教授頂ければ幸いです。

宜しくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <div class="table-responsive">
                <table class="table">
                    <tbody>
                        <tr>
                            <th>項目1</th>
                            <th>項目2</th>
                            <th>備考</th>
                            <th></th>
                        </tr>
                        <tr>
                            <td>
                                <select name="dest[]" class="form-control dest">
                                    <option value ="-----">選択してください</option>
                                    <option value ="01">項目1</option>
                                    <option value ="02">項目2</option>
                                </select>
                            </td>
                            <td>
                                <select name="pato[]" class="form-control pato">
                                    <option value ="-----">選択してください</option>
                                </select>
                            </td>
                            <td>
                                <input type="text" name="note[]" 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>
        </div>
        <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#add_row').on('click', function () {
                    var row = $('table:eq(0) > tbody tr:last').clone();
                    row.find('.dest').on('change', selectAjax);
                    row.appendTo($('table:eq(0) > tbody'));
                });

                var selectAjax = function () {
                    var elem = $(this);
                    var target = elem.parents('tr').find('.pato');

                    target.empty()
                            .append($('<option>').val('-----').text('選択してください'));

                    var url = 'ajax.php';
                    $.ajax({
                        type: 'post'
                        , url: url
                        , dataType: 'json'
                        , success: function (data) {
                            $.each(data, function (i, obj) {
                                var opt = $('<option>');
                                opt.val(obj.value)
                                        .text(obj.text)
                                        .appendTo(target);
                            });
                        }
                        , error: function () {
                            alert('ajax error!');
                        }
                    });
                };
                $('.dest').on('change', selectAjax);
            });
        </script>
    </body>
</html>

ajax.php

<?php

$arr = [
    ['value' => 0, 'text' => "text1"]
    , ['value' => 1, 'text' => "text2"]
    , ['value' => 2, 'text' => "text3"]
];

header('Content-type: application/json');
echo json_encode($arr);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

一部ajax部分のコードを変更して試してみましたが、問題なく動作しました。

以下ページより動作が確認できるかと思います。
https://jsfiddle.net/monagano/wmbyt9y8/3/

■以下の項目を確認してみてください。
・ajax通信の結果としてsuccessメソッドに入っているか
・successメソッドの変数dataが配列になっているかどうか

■その他気になった点
destとpatoにはlenが添え字で振られているのに、noteとadd_ptsにはlen+1が添え字で振られています。統一しなくて良いのでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る