Question

所以我尝试使用JSON结果在我的html中使用数组对象填充选择框，我一直在查看所有这些代码，所以我不认为我是看到我的问题的简单解决方案。这是我的回调函数，我填充了选择框。 JSON请求已经很好了，但我每次都遇到一个空白的选择框。

function getArtistsCallBack()
    {
        if (req.readyState == 4) {
            if (req.status == 200) {
                // TO DO: populate artistlist select box using JSON
                var response = req.responseText.parseJSON();
                var artistSelect = document.getElementById("artistlist");
                for (i=0;i<response.artistsarray.length;i++){
                    var artist_id = response.artistsarray[i].artist;
                    var artist = response.artistsarray[i].artist;               
                    artistSelect.options[artistSelect.options.length] = new Option(artist, artist_id, false, true);

                }   
            }
        }
    }

以下是HTML中的选择框，仅供参考;

<div id="artistscontent">
        <select id="artistlist"></select>

         </div>

这是artists.php，其中查询数据库的对象数组，即之前使用的数组;

<?php
    // Include utility files
    require_once 'include/config.php';  

    // Load the database handler
    require_once BUSINESS_DIR . 'database_handler.php'; 

    // Load Business Tier
    require_once BUSINESS_DIR . 'collection.php';

    $artistsarray = Collection::GetArtists();
    print json_encode($artistsarray);

    $jsonresponse='{"artistsarray":[';  
    foreach($artistsarray as $artist => $row)               
    {
        $artist_id=$artist+1;
        $artist=$row['artist'];
        $jsonresponse .= '"artist_id":"' . $artist_id . '"},';  
        $jsonresponse .= '"artist:"' . $artist . '"},';

    }
    $jsonresponse .= ']}';
    echo $jsonresponse; 
?>

任何帮助将不胜感激！谢谢！

Answer 1

您需要对options数组使用json长度，并在for循环之外执行。然后使用options.add

  var json = [{key:'1', value:'value1'},{key:'2', value:'value2'}]
  var artistSelect = document.getElementById("artistlist");
  artistSelect.options[json.length];
  $.each(json, function(key, value){
    console.debug(value);
    artistSelect.options.add(new Option(value.key, value.value));
  });

查看这个plunker： http://plnkr.co/edit/i3A6mo672CskXvbstWsu?p=preview

Answer 2

artistSelect.options不是数组，您需要使用add方法：

var opt = new Option(artist, artist_id);
artistSelect.options.add(opt);

使用JSON数组结果填充选择框

2 个答案: