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

Posted 2023-05-07

【中文标题】选择另一个下拉值时生成一个 select2 字段[重复]

【英文标题】：Generate a select2 field when another dropdown vaue is selected [duplicate]

【发布时间】：2020-05-24 15:07:09

【问题描述】：

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

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

【问题讨论】：

showError( mysqli_query( $conn, $query ) ) mysqli_error($conn)。你有一个名为showError()的函数？

@pet 3v4l.org/91XZr 如果您使用的是版本 4 ***.com/q/25428361/2943403，则更简单

【参考方案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();
    
);

【讨论】：

这是有道理的，但是我已经添加了行来启动 select2 与您添加的扇区ID ID，但它似乎没有影响。但是，我注意到 ID 标签只是简单地称为扇区 ID，而不是传入的值，它仅在页面正在编辑现有记录而不是添加新记录时用于选择所选值。将其更改为此似乎有效，因为下拉 ID 被称为扇区 ID：$('#sectorID').select2();

...感谢您的快速回复:-)

啊啊，我明白了，我脑子有问题，并认为 id 被动态设置为变量。我很高兴你能弄明白！