选择另一个下拉值时生成一个 select2 字段[重复]

Question

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

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

选择不同的值时，它运行更新器（）函数，该函数使用Ajax脚本加载与所选类别相关的所有扇区。然后页面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;
							
						}
						});

					}

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

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

<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 字段，而不是标准的选择下拉菜单？

谢谢

这是被调用的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 中创建的元素，它不会自动发生，即使它们具有相同的类。完成 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();
    }
});