Jquery IDが適用されます。

Question

JqueryとPHPを使用して動的注文フォームを作成しようとしています。 onclickに新しいフィールドセットを追加するJqueryコードがあります。そのjqueryコードでも、フィールドの1つにスタイルとjqueryを適用します。そのMultiselect、検索可能なドロップダウンリスト。

ここに問題があります。私はこのスタイルを適用して最初のものに検索バーなどを付けることができます。後のものはvalluesやsearchbarのない無作為マルチレイヤーです。だから、jQueryの中で、私は私はそれdoesntの仕事を意味するものをマークするために、キャップの怒りに2件のコメントを入れて

$(document).ready(function() { 
 
    var max_fields  = 100; //maximum input boxes allowed 
 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
 
    var add_button  = $(".add_field_button"); //Add button ID 
 

 
    var x = 1; //initlal text box count 
 

 
    //THIS WORKS!! 
 
    var arrayFromPHP = ['foo', 'bar'];//<?php echo json_encode($a); ?>; 
 
    $("#country" + x).select2({ 
 
     data: arrayFromPHP 
 
    }); 
 

 
    $(add_button).click(function(e){ //on add input button click 
 
     e.preventDefault(); 
 
     if(x < max_fields){ //max input box allowed 
 
      x++; //text box increment 
 

 
      //THIS DOESNT WORK!! 
 
      var arrayFromPHP = ['foo', 'bar'];//<?php echo json_encode($a); ?>; 
 
      $("#country" + x).select2({ 
 
       data: arrayFromPHP 
 
      }); 
 

 
      $(wrapper).append('' + 
 
       '<div>' + 
 
       '<select id="country'+ x +'" multiple="multiple" style="width:300px;">' + 
 
       '</select>' + 
 
       '<a href="#" class="remove_field">Remove</a>' + 
 
       '</div>' + 
 
       '<div><input type="number" name="quantity'+ x +'" min="1" max="10"><a href="#" class="remove_field">Remove</a></div>'); //add input box 
 
     } 
 
    }); 
 

 
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
 
    }) 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script> 
 

 
<div class="input_fields_wrap"> 
 
     <form method="post"><input type="submit" value="Add item" class="add_field_button"></form> 
 
     <div> 
 
      <select id="country1" multiple="multiple" style="width:300px;"> 
 
       <!-- Dropdown List Option --> 
 
      </select> 
 
     </div> 
 
    </div>

：

は、ここに私のコードです。

スクリーンショット：一目で

この

この作品複数選択]タブの[I]をクリックします。

画像が自身のために語っています。私はそれをクリックしても何も起こらない。

Answer 1

HTML要素が存在する前に、SELECT2を初期化している：

$("#country" + x).select2({ 
    data: arrayFromPHP 
}); 

$(wrapper).append('' + 
    '<div>' + 
    '<select id="country'+ x +'" multiple="multiple" style="width:300px;">' + 
    '</select>' + 
    'etc...'); 

select2ラインは、あなたが要素を作成 AFTER を来る必要があります方法はappendです。これを試してみてください（これは単なる例です）。

$(wrapper).append('' + 
    '<div>' + 
    '<select id="country'+ x +'" multiple="multiple" style="width:300px;">' + 
    '</select>' + 
    'etc...'); 

$("#country" + x).select2({ 
    data: arrayFromPHP 
}); 

Answer 2

編集はこれを試してみてください：

 var newContent = $('' + 
      '<div>' + 
      '<select id="country'+ x +'" multiple="multiple" style="width:300px;">' + 
      '</select>' + 
      '<a href="#" class="remove_field">Remove</a>' + 
      '</div>' + 
      '<div><input type="number" name="quantity'+ x +'" min="1" max="10"><a href="#" class="remove_field">Remove</a></div>' 
     ) 
     $(wrapper).append(newContent); 
     newContent.find("#country" + x).select2({ 
      data: arrayFromPHP 
     });