使用javascript和PHP数组/JSON创建动态选择元素_Javascript_Php

使用javascript和PHP数组/JSON创建动态选择元素

javascript php

使用javascript和PHP数组/JSON创建动态选择元素,javascript,php,Javascript,Php,我有一段代码，它在PHP中创建了一个数组，然后对数组使用json\u encode <?php //create array of items for nominal code box $nominalCodes = array(); $array = Statuses('Nominal Codes'); foreach($array["results"] as $ret) { $nominalCodes[] = array('value' => $ret["name"],

我有一段代码，它在PHP中创建了一个数组，然后对数组使用

json\u encode

<?php
//create array of items for nominal code box
$nominalCodes = array();
$array = Statuses('Nominal Codes');
foreach($array["results"] as $ret) {
    $nominalCodes[] = array('value' => $ret["name"], 'label' => $ret["display"].' ('.$ret["name"].')');
}
$nominalCodesData = json_encode($nominalCodes);
?>

请尝试以下JavaScript：

//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
Cell0.appendChild(selectList);

//Create and append the options
for(var i = 0; i < array.length; i++) {
    var obj = array[i];
    var option = document.createElement("option");
    option.value = obj["value"];
    option.text = obj["label"];
    selectList.appendChild(option);
}

//创建并附加选择列表
var selectList=document.createElement（“选择”）；
selectList.id=“mySelect”；
Cell0.appendChild（选择列表）；
//创建并附加选项
对于（var i=0；i

请尝试以下JavaScript：

//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
Cell0.appendChild(selectList);

//Create and append the options
for(var i = 0; i < array.length; i++) {
    var obj = array[i];
    var option = document.createElement("option");
    option.value = obj["value"];
    option.text = obj["label"];
    selectList.appendChild(option);
}

//创建并附加选择列表
var selectList=document.createElement（“选择”）；
selectList.id=“mySelect”；
Cell0.appendChild（选择列表）；
//创建并附加选项
对于（var i=0；i

JSON索引成为JavaScript中的属性，因此，您必须编写

obj.key

，而不是

obj[key]

。接下来是代码（箭头所指）◄======):


//创建要添加的选项数组
变量数组=；
//创建并附加选择列表
var selectList=document.createElement（“选择”）；
selectList.id=“mySelect”；
document.getElementById（“my_div”）.appendChild（selectList）；
//创建并附加选项
对于（var i=0；i


复制粘贴文件中以前的代码，将其另存为PHP并在浏览器中打开。
JSON索引成为JavaScript中的属性，因此，您必须编写obj.key
，而不是obj.key
。接下来是代码（箭头所指）◄======):

//创建要添加的选项数组
变量数组=；
//创建并附加选择列表
var selectList=document.createElement（“选择”）；
selectList.id=“mySelect”；
document.getElementById（“my_div”）.appendChild（selectList）；
//创建并附加选项
对于（var i=0；i

复制粘贴文件中以前的代码，将其保存为PHP并在浏览器中打开。
PHP的输出是什么？当然值得编辑您的问题以包含它。您可以给我们print\r（$nominalCodes）的值吗
或echo$nominacodesdata；
来自您的PHP？PHP的输出是什么？当然值得编辑您的问题以包含它。您可以给我们您的PHP的print\r（$nominacodes）；
或echo$nominacodesdata；的值吗？
//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
Cell0.appendChild(selectList);

//Create and append the options
for(var i = 0; i < array.length; i++) {
    var obj = array[i];
    var option = document.createElement("option");
    option.value = obj["value"];
    option.text = obj["label"];
    selectList.appendChild(option);
}

<?php
//create array of items for nominal code box
$nominalCodes = array();
//$array = Statuses('Nominal Codes');
// SAMPLE DATA ▼
$nominalCodes[] = array('value' => "aaa", 'label' => "111" . ' (aaa)');
$nominalCodes[] = array('value' => "bbb", 'label' => "222" . ' (bbb)');
$nominalCodes[] = array('value' => "ccc", 'label' => "333" . ' (ccc)');
$nominalCodesData = json_encode($nominalCodes);
?>
<html>
  <head>
  </head>
  <body>
    <div id="my_div">
    </div>
    <script type="text/javascript">
//Create array of options to be added
    var array = <?php echo $nominalCodesData; ?>;

    //Create and append select list
    var selectList = document.createElement("select");
    selectList.id = "mySelect";
    document.getElementById( "my_div" ).appendChild(selectList);

    //Create and append the options
    for(var i = 0; i < array.length; i++) {
        var obj = array[i];
      //for(var key in obj) {
            var option = document.createElement("option");
            option.value = obj.value;         //◄============================
            option.text = obj.label;          //◄============================
            selectList.appendChild(option);
      //}
    }
    </script>
  </body>
</html>