Question

我试图将Select2框放入while循环中。但它仅适用于第一个选择标签。尽管循环工作正常，但是选择标记在第一个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个有效。

Answer 1

如果在代码示例中提供循环，将很有帮助。最可能的问题是您的ID不唯一。如果您有多个具有相同ID的标签，则javascript将仅识别第一个。这是一个示例进行演示。

https://jsfiddle.net/n8vxjoc1/1/

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

只有第一个元素会更改，并显示数字1。

根据W3C规范：

id属性指定其元素的唯一标识符（ID）。

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

您应该为选择下拉列表提供一个类，并以此为目标。例如

https://jsfiddle.net/n8vxjoc1/1/

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

Answer 2

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

    <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：

<?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;

}

JS

$(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
     }
   });
}

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

2 个答案: