javascript seletboxの連動をさせたまま複製（clone）したい

Question

javascript seletboxの連動をさせたまま複製（clone）したい

解決済

回答 3

投稿 2021/02/22 14:25 ・編集 2021/02/23 20:23

評価
クリップ 0
VIEW 131

php_user001

score -3

selectboxの連動をさせて増減する入力フォームを作成したい

jQueryによるフォームテーブル行の追加・削除

jQuery 3つのプルダウンを連動させるプラグイン

    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script>
        jQuery(function($) {

         $("#btnAdd3").on("click", function() {
                // 最終行ではなく、非表示になっている最初の行なので first-child になっている
                $("#tblForm3 tbody tr:first-child").clone(true).appendTo("#tblForm3 tbody");

                // 複製後に表示させる
                $("#tblForm3 tbody tr:last-child ").val('');
                // $("#tblForm3 tbody tr:last-child input").val('');

                var i = $('td p#num').html();
                $('td p#num').each(function(i){
                    $(this).html(i+1);
                    i++;
                });

                // 行削除
                $(".btnDelete").on("click", function() {
                $(this).parent().parent().remove();

                });
            });
        });
    </script>
    <script>
        $(document).ready(function(){
            // プルダウンのoption内容をコピー
            var pd2 = $("#lv2Pulldown option").clone();
            var pd3 = $("#lv3Pulldown option").clone();
            // 1→2連動
            $("#lv1Pulldown").change(function () {
                // lv1のvalue取得
                var lv1Val = $("#lv1Pulldown").val();
                // lv2Pulldownのdisabled解除
                $("#lv2Pulldown").removeAttr("disabled");
                // 一旦、lv2Pulldownのoptionを削除
                $("#lv2Pulldown option").remove();
                // (コピーしていた)元のlv2Pulldownを表示
                $(pd2).appendTo("#lv2Pulldown");
                // 選択値以外のクラスのoptionを削除
                $("#lv2Pulldown option[class != p"+lv1Val+"]").remove();
                // 「▼選択」optionを先頭に表示
                $("#lv2Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
                // lv3Pulldown disabled処理
                $("#lv3Pulldown").attr("disabled", "disabled");
                $("#lv3Pulldown option").remove();
                $("#lv3Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
            });

            // 2→3連動
            $("#lv2Pulldown").change(function () {
                // lv2のvalue取得
                var lv2Val = $("#lv2Pulldown").val();
                // lv3Pulldownのdisabled解除
                $("#lv3Pulldown").removeAttr("disabled");
                // 一旦、lv3Pulldownのoptionを削除
                $("#lv3Pulldown option").remove();
                // (コピーしていた)元のlv3Pulldownを表示
                $(pd3).appendTo("#lv3Pulldown");
                // 選択値以外のクラスのoptionを削除
                $("#lv3Pulldown option[class != p"+lv2Val+"]").remove();
                // 「▼選択」optionを先頭に表示
                $("#lv3Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
            });
        });
    </script>

<body>
    <input id="btnAdd3" type="button" value="行追加" />
    <table id="tblForm3">
    <tbody>
    <tr >
        <td><p id=num>1</p></td>
        <td>
            <select name="lv1" id="lv1Pulldown">
                <option value="0" selected="selected">▼選択</option>
                <option value="1">ファッション</option>
                <option value="2">ドリンク・お酒</option>
                <option value="3">パソコン・周辺機器</option>
            </select>
        </td>
        <td>
            <select name="lv2" id="lv2Pulldown" disabled="disabled">
                <option value="0">▼選択</option>
                <option value="4" class="p1">バッグ</option>
                <option value="5" class="p1">シューズ</option>
　　　　　　　　　　　　　　　　　　　　<!--割愛 -->
            </select>
        </td>
        <td>
            <select name="lv3" id="lv3Pulldown" disabled="disabled">
                <option value="0">▼選択</option>
                <option value="13" class="p4">アタッシュケース</option>
                <option value="14" class="p4">ウエスト、ヒップバッグ</option>
                <option value="15" class="p4">ショルダーバッグ</option>
                <option value="16" class="p5">ビジネスシューズ</option>
                <option value="17" class="p5">ローファー</option>
                <option value="18" class="p5">スニーカー</option>
                            <!--割愛 -->
            </select>
        </td>
    </tr>
    </tbody>
    </table>
</body>

行の追加（削除は未実装の為割愛します）は問題なく出来ているのですが、
複製(clone)した後のselectboxが連動せず、複製元のselectboxに干渉してしまいます。

追記

その後HTMLに　 style="display: none;"
を追加しました。加えて追加ボタンを押す事にselectboxに一意のidを付与いたしました。

<script>
        jQuery(function($) {
         $("#btnAdd3").on("click", function() {
                // 最終行ではなく、非表示になっている最初の行なので first-child になっている
                $("#tblForm3 tbody tr:first-child").clone(true).appendTo("#tblForm3 tbody");
                // 複製後に表示させる
                $("#tblForm3 tbody tr:last-child ");
                $("#tblForm3 tbody tr:last-child ").css("display", "table-row");
                <!--割愛 -->
                // selectクラスに(id属性+連番)を付与
                $(function(){
                    /** select1クラスを持つ要素に連番でID(lv1Pulldown)を付与 */
                    $('.select1').each(function(i){
                        $(this).attr('id', 'lv1Pulldown' + (i));
                    });
                });
                $(function(){
                    /** select2クラスを持つ要素に連番でID(lv2Pulldown)を付与 */
                    $('.select2').each(function(i){
                        $(this).attr('id', 'lv2Pulldown' + (i));
                    });
                });
                $(function(){
                    /** select3クラスを持つ要素に連番でID(lv3Pulldown)を付与 */
                    $('.select3').each(function(i){
                        $(this).attr('id', 'lv3Pulldown' + (i));
                    });
                });
                // 行削除
                $(".btnDelete").on("click", function() {
                    $(this).parent().parent().remove();
                });
            });
        });
    </script>
    <script>
        $(document).ready(function(){
            //HTMLの読み込みが完了したら先に各カテゴリのプルダウンのoption内容をコピー
            var pd2 = $(".select2 option").clone();
            var pd3 = $(".select3 option").clone();

        // 追加ボタンを押す前の状態各idがlv1Pulldownになり、追加ボタンを押した以降のidはlv1Pulldown1になる
            // 1→2連動
           // $('.select1').on('click', function() {

                //var click_id = $(this).attr('id');
               // var fix = click_id.slice(3);

                    $(".select1").change(function () {
                        // selectboxを変更したidとvalue値を取得
                        var cate_id = $(this).attr('id');
                        // console.log(cate_id);
                        var value_id = $(this).val();
                        // 同じ行の第2カテゴリを取得すため「lv1」を削除
                        var str1 = cate_id.slice(3);
                        // 中カテゴリのdisabledを削除
                        $("#lv2"+str1).removeAttr("disabled");
                        // 一旦、同じ行の第2カテゴリのoptionを削除
                        $("#lv2"+str1+" option").remove();
                        // (コピーしていた)元の.select2を表示
                        $(pd2).appendTo("#lv2"+str1);
                        // 選択値以外のクラスのoptionを削除
                        $("#lv2"+str1+" option[class != p"+value_id+"]").remove();
                        // 「▼選択」optionを先頭に表示
                        $("#lv2"+str1).prepend('<option value="0" selected="selected">▼選択</option>');
                    });
          //  });
            // 2→3連動
            $(".select2").change(function () {
                // selectboxを変更したidとvalue値を取得
                var cate_id2 = $(this).attr('id');
                var value_id2 = $(this).val();
                // 同じ行の第3カテゴリを取得すため「lv2」を削除
                var str2 = cate_id2.slice(3);
                // 小カテゴリのdisabledを削除
                $("#lv3"+str2).removeAttr("disabled");
                // 一旦、同じ行の第3カテゴリのoptionを削除
                $("#lv3"+str2+" option").remove();
                // (コピーしていた)元の.select3を表示
                $(pd3).appendTo("#lv3"+str2);
                // 選択値以外のクラスのoptionを削除
                $("#lv3"+str2+" option[class != p"+value_id2+"]").remove();
                // 「▼選択」optionを先頭に表示
                $("#lv3"+str2).prepend('<option value="0" selected="selected">▼選択</option>');
            });
        });
    </script>

                <td>
                    <select class="select1" id="lv1Pulldown" name="lv1" >
                           <!--変更なし -->
                    </select>
                </td>
                <td>
                    <select name="lv2" class="select2" id="lv2Pulldown" disabled="disabled">
                        <!--変更なし -->
                    </select>
                </td>
                <td>
                    <select name="lv3" class="select3" id="lv3Pulldown" disabled="disabled">
                        <option value="0">▼選択</option>
                        　　<!--変更なし -->
                    </select>
                </td>
                            <!--変更なし -->

挙動は以下のとおりです。

原因はscriptの

$(".select1").change(function () {
　　　　　　　　　　//省略

の時にどのselectboxかを限定出来ていないからだと考えています。
よって「最初のselectboxをクリックした時」にどのselectboxかをidで特定さえ出来れば
解決するのかなと考えております。

その他アドレス等ございましたらお手数おかけしますがよろしくお願いします。

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

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

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

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

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

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

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

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

2 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

babu_babu_baboo

2021/02/24 04:17

jQuery を持ち出してでもコードが長く、このコードを検証する気さえおきません。ちょうど先日同じような質問に回答しました。参考にできますか？
ライブラリを使わずとも簡潔に書けますよ。
https://teratail.com/questions/324065#reply-449451

jQuery を持ち出してでもコードが長く、このコードを検証する気さえおきません。ちょうど先日同じような質問に回答しました。参考にできますか？ライブラリを使わずとも簡潔に書けますよ。 https://teratail.com/questions/324065#reply-449451

キャンセル
php_user001

2021/02/24 09:55

ありがとうございます。

ありがとうございます。

キャンセル

回答 3 件

評価が高い順
新着順
古い順

+1

現在初期化の際にのみ行っている「連動用イベントハンドラの登録」処理を、
行の追加後にも同様に行えばよいのではないでしょうか。
但し、現在はID指定でイベントハンドラを登録していますが、追加行の要素も同じIDだと問題があるので、そこは別IDにするなどの対応が必要かと思います。

投稿 2021/02/22 15:36

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2021/02/22 18:09

返信ありがとうございます。
IDの重複問題との事でしたのでscriptタグに追加ボタンを押す事にid名に名前+番号を付与する
ループ処理を記載いたしました。
// selectクラスに(id属性+連番)を付与
$(function(){
/** select1クラスを持つ要素に連番でID(lv1Pulldown)を付与 */
$('.select1').each(function(i){
$(this).attr('id', 'lv1Pulldown' + (i+1));
});
});
$(function(){
/** select2クラスを持つ要素に連番でID(lv2Pulldown)を付与 */
$('.select2').each(function(i){
$(this).attr('id', 'lv2Pulldown' + (i+1));
});
});
$(function(){
/** select3クラスを持つ要素に連番でID(lv3Pulldown)を付与 */
$('.select3').each(function(i){
$(this).attr('id', 'lv3Pulldown' + (i+1));
});
});

これだとIDの重複は発生しないかと思います。
後は「連動用イベントハンドラ」のid名を調整すれば行けるかなと考えております。

返信ありがとうございます。 IDの重複問題との事でしたのでscriptタグに追加ボタンを押す事にid名に名前+番号を付与するループ処理を記載いたしました。 // selectクラスに(id属性+連番)を付与 $(function(){ /** select1クラスを持つ要素に連番でID(lv1Pulldown)を付与 */ $('.select1').each(function(i){ $(this).attr('id', 'lv1Pulldown' + (i+1)); }); }); $(function(){ /** select2クラスを持つ要素に連番でID(lv2Pulldown)を付与 */ $('.select2').each(function(i){ $(this).attr('id', 'lv2Pulldown' + (i+1)); }); }); $(function(){ /** select3クラスを持つ要素に連番でID(lv3Pulldown)を付与 */ $('.select3').each(function(i){ $(this).attr('id', 'lv3Pulldown' + (i+1)); }); }); これだとIDの重複は発生しないかと思います。後は「連動用イベントハンドラ」のid名を調整すれば行けるかなと考えております。

キャンセル

+1

cloneされた要素は、IDもclone元と全く同じです。
なので、イベントリスナ内でIDを使って要素を探索すると、一行目のものが引っかかってしまいます。
イベントリスナの中で連動させるセレクトボックスを取得する時に、IDではなくイベント発生元からの相対位置で探せば良いかと。

$("#lv1Pulldown").change(function () {
    // lv1のvalue取得
    var lv1Val = $("#lv1Pulldown").val();

    const lv2 = $(this.parentElement.nextSibling.firstElementChild);
    // lv2Pulldownのdisabled解除
    lv2.removeAttr("disabled");
    // 一旦、lv2Pulldownのoptionを削除
    lv2.children("option").remove();
    // (コピーしていた)元のlv2Pulldownを表示
    lv2.append(pd2);
//以下略

投稿 2021/02/22 15:37

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2021/02/22 18:03

迅速な返信ありがとうございます。提示していただいたコードを元に書きましたが
私の知見不足で上手く動きませんでした。
引き続き取り掛かります。ありがとうございました。

迅速な返信ありがとうございます。提示していただいたコードを元に書きましたが私の知見不足で上手く動きませんでした。引き続き取り掛かります。ありがとうございました。

キャンセル

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

score 0 · Accepted Answer · 2021-02-24T10:12

解決した方法

-1

別記事に記載したため

投稿 2021/02/24 10:12

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

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

javascript seletboxの連動をさせたまま複製（clone）したい

selectboxの連動をさせて増減する入力フォームを作成したい

追記

関連した質問

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

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

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

javascript seletboxの連動をさせたまま複製（clone）したい

selectboxの連動をさせて増減する入力フォームを作成したい

追記

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

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン