选择另一个下拉值时生成一个 select2 字段

Question

我有一个初始下拉菜单，我想在其中 select 一个值：

<select id="indexID" name="indexID" class="form-control" onChange="updateSector();" style="width:300px;">
<option value='' selected>Select and Index</option> 
<option value='3'>AIM</option>
<option value='1'>FTSE 100</option>
<option value='2'>FTSE 250</option>
</select>

当一个不同的值被 selected 时，它运行 updateSector() 函数，该函数使用 ajax 脚本加载与 selected 类别相关的所有扇区.页面 investment_sectors 的输出随后显示在页面上的标记中。

function updateSector(){
    
     <? if ($sectorID<>""){?>
      var sectorID = <?=$sectorID?>;
     <? }else{?>
      var sectorID = "";
      <?}?>
      
    var indexID = document.getElementById("indexID");
                var indexID = indexID.options[indexID.selectedIndex].value;
    
      var dataString = 'indexID=' + indexID +'&sectorID=' + sectorID;
      // AJAX code to submit form.
      $.ajax({
      type: "POST",
      url: "investment_sectors.php",

      data: dataString,
      cache: false,
      success: function(html) {
       //alert(html);
       document.getElementById("sector").innerHTML = html;
       
      }
      });

     }

如果我想生成标准的 select 扇区下拉列表，这一切都有效。但是因为有很多扇区，我真的想要一个 select2 字段。

通常，如果我只是在标准页面中包含 select2 字段，我会将此脚本添加到底部以加载我想要预 selected 的任何传递值。但是，由于在选项被 selected 并传回之前标记为空，因此没有任何内容可填充。

<script>
 $(document).ready(function() {
  $('.js-example-basic-single').select2();
 });
 $(document).ready(function() {
 
   var select2single = $('.js-example-basic-single').select2({
  placeholder: "Please Select",
   width: '400px',
  multiple: false,
   })
   select2single.val([<?=$sectorID?>]);
   select2single.trigger("change");
  
   
 }); 
</script>

任何人都可以帮助我修改我的代码以生成此 select2 字段，而不是标准的 select 下拉列表吗？

谢谢

这是调用的 investment_sector 页面中的代码：

$sectorID=$_REQUEST['sectorID'];
$indexID=$_REQUEST['indexID'];

switch ($indexID){
    case "1":
        $sectorlist = "FTSE";
        break;
    case "2":
        $sectorlist = "FTSE";
        break;
    case "3":
        $sectorlist = "AIM";
        break;
    default:
        $sectorlist = "";
}

$query = "SELECT * FROM tbl_sector WHERE sectorlist='".$sectorlist."' order by sector ASC";

$result = mysqli_query( $conn, $query )or showError( mysqli_query( $conn, $query ) );
$num_rows = mysqli_num_rows( $result );

echo "<select class=\"js-example-basic-single js-states form-control\" id=\"sectorID\" name=\"sectorID\">";

if ($sectorID==""){
    echo "<option value='' selected>Select a ".$sectorlist." sector</option> \n ";
}

$i = 0;
while ( $row = mysqli_fetch_array( $result ) ) {
  if ( $sectorID == $row[ 'sectorID' ] ) {
        echo "<option value='" . $row[ 'sectorID' ] . "' selected>".$row[ 'sectorlist' ]." - " . $row[ 'sector' ] . "</option> \n ";
     } else {
        echo "<option value='" . $row[ 'sectorID' ] . "'>".$row[ 'sectorlist' ]." - " . $row[ 'sector' ] . "</option>\n";
     }

  $i++;

}
echo "</select>";

Answer 1

问题是您仅在文档准备就绪时才初始化 select2。对于之后在 DOM 中创建的元素，它不会自动发生，即使它们具有相同的 class。 ajax 完成后，您应该为新元素重新初始化 select2。试试这个：

$.ajax({
    type: "POST",
    url: "investment_sectors.php",

    data: dataString,
    cache: false,
    success: function(html) {
        //alert(html);
        document.getElementById("sector").innerHTML = html;
        $('#' + sectorID).select2();
    }
});

选择另一个下拉值时生成一个 select2 字段

Generate a select2 field when another dropdown vaue is selected

javascript

php

jquery

jquery-select2