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

时间:2016-07-12 18:27:53

标签: javascript php

我有这个代码在PHP中创建一个数组,然后使用json_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);
?>

然后我尝试使用PHP数组中的选项创建一个select元素。

我希望能够使用PHP数组中的数据(value = select option / label = select选项的显示)

我试过这段代码:

//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";
    Cell0.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[key];
            option.text = key;
            selectList.appendChild(option);
        }
    }

但是,这是在select元素中返回的选项:

label
value
label
value
label
value
label
value
label
value
label
value
label
value
label
value
label
value

2 个答案:

答案 0 :(得分:1)

请尝试使用以下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);
}

答案 1 :(得分:1)

JSON索引成为JavaScript中的属性,因此,您必须编写obj[key]而不是obj.key。接下来是代码(由箭头◄======指出):

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

将以前的代码复制粘贴到文件中,将其另存为PHP并在浏览器中打开。