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

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

新規登録して質問してみよう
ただいま回答率
85.60%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2916閲覧

jQueryプラグイン「Select2」の複製が意図した挙動にならない

kuregumo

総合スコア11

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2022/05/18 08:51

編集2022/05/20 03:39

jQueryプラグイン「Select2」を使用したフォームを制作しています。その中で、Select2を適用したセレクトボックスを動的に生成(追加)する場面がありました。
単純にappendするだけではだめだということが分かり、いくつかのサイトを参考に試してみました。
Select2が適用されたセレクトボックスの生成はできましたが、生成と同時に上のセレクトボックスのSelect2が解除されてしまいます。

HTML

1<div class="form-category"> 2 <div class="form-select"> 3 <select id="box1" class="select2"> 4 <option></option> 5 <?php 6 foreach(データーベースから): 7 p(' 8 <option data-id="$key">$value</option> 9 '); 10 endforeach; 11 ?> 12 </select> 13 </div> 14<input type="submit" id="form_add_select"> 15</div>

js

1$(document).ready(function(){ 2 $('#form_add_select').on('click', function(){ 3 $clone = $(".form-select:first-child").clone(true); 4 $clone.find("span").remove(); 5 $clone.find("select").select2(); 6 $clone.appendTo(".form-category"); 7 $("select").select2(); 8 9 10 $('.form-select select').each(function(i){ 11 $(this).attr('id','box' + (i+1)); 12 }); 13 }); 14 $('#form_del_member').on('click', function(){ 15 if($('.form-select').length != 1){ 16 $('.form-select:last-child').remove(); 17 } 18 }); 19});

どうぞよろしくお願いいたします。
【参考にしたサイト】
AdminLTE3 select2を複数生成
[jQuery/Select2]動的なselectボックスにSelect2を適用する方法
jqueryプラグイン "select2" を使ったフォームを動的に追加(複製)すると上手く動かない。(teratail)

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

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

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

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

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

guest

回答1

0

自己解決

自己解決したので投稿します。

一番の問題点は、セレクトボックスに紐づけたIDが重複していることでした。Select2の仕様では、同じidを持つセレクトボックスがある場合後のボックスにのみselect2が適用されます。

質問のjsコードでは、セレクトボックスをクローン化してHTMLに挿入した後にIDを変更しているため、
id=1のボックスをクローン化

id=1(クローン)にSelect2を適用

id=1が二つある状態でHTMLに挿入

id=1(クローン)のidを変更
という状態でした。

また、Select2を適用したセレクトボックスにはdata-select2-idという属性が付与されます。この属性が被っている場合でも後のボックスにのみSelect2が適用される形になります。

実際のコード

js

1var i = $(".member-sel").length; 2$clone = $(".form-select:first-child").clone(true); 3$clone.find("span").remove(); 4$clone.find("select").attr('id','member' + (i+1)); 5$clone.find("select").attr('data-select2-id','member' + (i+1)); 6$clone.find("select").select2(); 7$clone.appendTo(".form-category");

投稿2022/05/21 01:37

kuregumo

総合スコア11

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

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

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答へのコメント

amon1020

2023/01/01 06:02

そもそもidは一つです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.60%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。