如何以编程方式在 select div 标签内添加选项？

Question

我想做的是，如果可能的话，以编程方式添加 select div 标签内的选项。

这是我的html代码

 <select class="form-control multiplechose_questionTypes" name="selector[]" id="selector" > 
   <option value="" disabled selected>Select your option</option>
   <option value="saab">Saab</option>
   <option value="fiat">Fiat</option>
   <option value="audi">Audi</option>
 </select>

在我的 php 脚本中，我有一个变量，它从传入的函数中获取计数

$count  = count_answers_belongToOne_question($questionNumber);

假设 $count 返回值 2，我只想在 select div 标签内显示 2 个选项。因此，根据 $count 中的值，我希望它在 <select> 上更新。

任何人都可以建议我如何着手进行此操作的想法或解决方案

Answer 1

只需使用一个简单的循环在页面呈现之前将选项注入页面。我假设您有一组可供提取的期权数据。

<?php 
    $optionData = array(
        array('value' => 'saab', 'label' => 'saab'),
        ...
    );
?>

<select class="form-control multiplechose_questionTypes" name="selector[]" id="selector" >
    <option value="" disabled selected>Select your option</option>
    <?php
        for($i = 0; $i < count; $i++) {
            echo '<option value="' . $optionData[$i]["value"] . '">' . $optionData[$i]["label"] . '</option>';
        }
    ?>
</select>

Answer 2

动态添加选项的方式有两种，分别是javascript和PHP，

选项 1：使用 Javascript - 我假设 select 选项是静态的

第 1 步：您需要在 json 变量中设置 selects 选项第 2 步：将 $count php 变量赋值给 js count 变量第 3 步：根据您的 js 计数变量，您可以创建 select 选项并插入到 select 元素中。

选项 2：使用 PHP 和 Ajax

第 1 步：您需要创建一个 ajax 请求并发送 $count php 变量第 2 步：创建 PHP 函数，它将调用 ajax 请求并将您的选项呈现为 HTML。第 3 步：将此选项 HTML 字符串设置为目标 select 元素 ID。

Answer 3

select your element first
var select = document.getElementById('selectElementId');

onclick or any other event add this functionality
function addOption()
{ 
var opt = document.createElement('option');
    opt.value = 'YourValue';
    opt.innerHTML = 'Option1';
    select.appendChild(opt);
}

Answer 4

试试这个

<?php
$vehicles = array("saab"=>"Saab","fiat"=>"Fiat","audi"=>"Audi");
$count  = count_answers_belongToOne_question($questionNumber);
array_splice($vehicles , $count);
?>
<select class="form-control multiplechose_questionTypes" name="selector[]" id="selector" > 
   <option value="" disabled selected>Select your option</option>
   <?php
       foreach ($vehicles as $key => $value) {
    ?>
        <option value="<?php echo $key;?>"><?php echo $value;?></option>            
   <?php
       }
   ?>   
 </select>

Answer 5

如其他答案所述，使用 PHP 有很好的方法，但这里有一个简单的 javascript 用于更新 HTML DOME select 选项

<script>
function updateSelect(options){

var x = document.getElementById("selector");

if (x.length > 0) {
    for (i = options; i < x.length+1; i++){
        x.remove(options);
    }
} 
}
window.onload = function (){updateSelect(2);}
</script>

您可以在运行时设置 php 中的计数值，例如

window.onload = function (){updateSelect(<?=$count ?>);}

或者像这样的ajax

<script>
function updateSelect(options){

var x = document.getElementById("selector");

if (x.length > 0) {
    for (i = options; i < x.length+1; i++){
        x.remove(options);
    }
} 
}
window.onload=function(){
xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) {
    var count = xhttp.responseText;
    updateSelect(count);
  }
};
xhttp.open("GET", "url/to/get/count", true);
xhttp.send();
}
</script>

希望这对某人有所帮助！

如何以编程方式在 select div 标签内添加选项？

How to programmatically add options inside a select div tag?

php

html

select

html-select