Javascript 如何在while循环中添加select2动态选择框？

我试图在while循环中放入Select2框。但它只适用于第一个select标记。虽然循环工作正常，但在第一个1之后，选择标记不工作。如何解决此问题

我还尝试添加打印PHP唯一id来修复它。但什么也没发生

<select type="text" name="city" id="city-<?php echo $id; ?>" class="form-control"></select>

这是javascript部分：

<script type="text/javascript">
$('#city-<?php echo $id; ?>').select2({
    placeholder: 'Select city',
    ajax: {
        url: 'processes/cities.php',
        dataType: 'json',
        delay: 250,
        processResults: function (data) {
            return {
                results: data
            };
        },
        cache: true
    }
});
</script>

---

我希望所有的选择框都能正常工作。但实际上，只有前1个有效。

如果您在代码示例中提供循环，这将非常有用。 最可能的问题是您的id不是唯一的。如果您有多个具有相同id的标记，那么javascript将只识别第一个标记。 下面是一个要演示的示例

只有第一个元素将更改，它将显示数字1

根据W3C规范：

id属性指定其元素的唯一标识符id

您应该为select下拉列表指定一个类，并将其作为目标。 例如

---

您可以从以下链接获取帮助：

PHP:

JS

---

确保两个select select2上的id都是唯一的。

<div id="city-1">Content</div>
<div id="city-1">Content</div>
<script>
  jQuery( '#city-1' ).html( jQuery( '#city-1' ).length );
</script>

<select name="city" class="select2 form-control">…</select>
<select name="city" class="select2 form-control">…</select>
<script type="text/javascript">
  $('select.select2').select2({});
</script>

    <select class="select2_el" style='width: 200px;'>
   <option value='0'>- Search user -</option>
</select>

<div id='elements'>

</div>
<input type="button" id="btn_add" value="Add">

<?php
include 'config.php';// add your config details on that file

$request = 1;
if(isset($_POST['request'])){
  $request = $_POST['request'];
}

// Select2 data
if($request == 1){
  if(!isset($_POST['searchTerm'])){
     $fetchData = mysqli_query($con,"select * from users order by name limit 5");
  }else{
     $search = $_POST['searchTerm'];
     $fetchData = mysqli_query($con,"select * from users where name like '%".$search."%' limit 5");
  }

  $data = array();

  while ($row = mysqli_fetch_array($fetchData)) {
     $data[] = array("id"=>$row['id'], "text"=>$row['name']); 
  }

  echo json_encode($data);
  exit;
}

// Add element
if($request == 2){

   $html = "<br><select class='select2_el' ><option value='0'>- Search user -</option></select><br>";
   echo $html;
   exit;

}

$(document).ready(function(){

  // Initialize select2
  initailizeSelect2();

  // Add <select > element
  $('#btn_add').click(function(){
     $.ajax({
       url: 'ajaxfile.php',
       type: 'post',
       data: {request: 2},
       success: function(response){

         // Append element
         $('#elements').append(response);

         // Initialize select2
         initailizeSelect2();
       }
     });
  });

});

// Initialize select2
function initailizeSelect2(){

   $(".select2_el").select2({
     ajax: {
       url: "ajaxfile.php",
       type: "post",
       dataType: 'json',
       delay: 250,
       data: function (params) {
          return {
            searchTerm: params.term // search term
          };
       },
       processResults: function (response) {
          return {
             results: response
          };
       },
       cache: true
     }
   });
}