jQuery - <option>は、<select>とそれ以降の両方に追加されています

Question

<select>のオブジェクトを繰り返し処理しようとしています。それぞれについて、一連の<option>タグを追加する必要があります。これらのオプションを使用すると、データベースに保存される色を選択できます。さて、私はオブジェクトのスタイリングを処理するためにbootstrap-selectプラグインを使用していますが、これは私の投稿とは関係ないと思います。

<option>タグの配列は、データベースから実行時にロードされる隠しフィールドのグループから学習されます。したがって、それまでは知られていないので、すべてのことが動的に行われなければなりません。これらの隠された各フィールドは 'color_list'クラスに属しているので、反復は非常に簡単です。

<select>オブジェクトを正しく更新できるのであれば、私のコードは機能します。しかし、私のコードでは、の<select>タグが閉じられているので、これらのコードを<option>タグと重複しているように見えます。絵は何千語もの価値がありますよね？個々の<option>タグはそれ（間違った）の外に、再び（正しい）と<select>タグ内に一度繰り返される方法

お知らせ？ <select>タグの外側に追加されたタグは、実際には新しいカラーブロックをドロップダウンリストの下に追加しています。

私のjQueryコードでは、一度だけ追加しているので、なぜこのようなことが起こっているのか分かりません。

function updateColorPickers() { 

    // iterate over each color picker 
    $(".colorpicker").each(function(i, picker) { 

     // and add each color as an option to it 
     $(".color_list").each(function(j, elem) { 
      var str = "<option class='color_opt' style='background:"; 
      str  += $(elem).val(); 
      str  += "'>"; 
      str  += $(elem).val(); 
      str  += "</option>"; 

      $(picker).append(str); 
     }); 

     $(picker).selectpicker('refresh'); 
    }); 
} 

Answer 1

クラスcolorpickerの2つの要素があるからです。あなたはおそらく、私はそれに気付かなかった$('select.colorpicker').each