Question

我想要做的是，如果可能的话，以编程方式添加选择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 - 我假设选择选项是静态的

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

选项2：使用PHP和Ajax

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

Answer 3

Comp_Name   Addr_Street     Cont_FullName
XYZ Co.     12 Light Street NULL
XYZ Co.     44 King Street  Bob
XYZ Co.     44 King Street  Alice
ABC Co.     12 ABC Street   NULL
ABC Co.     44 ABC Street   Bob ABC
ABC Co.     44 ABC Street   Alice ABC

Answer 4

试试这个

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 5

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

<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中的count值，如

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标签内添加选项？

5 个答案: