JSON 字符串中的 HTML 下拉列表答案

【问题标题】：HTML dropdown from a JSON stringJSON 字符串中的 HTML 下拉列表
【发布时间】：2015-05-09 01:28:30
【问题描述】：

我有一个 JSON 字符串，看起来像这样

[
    {
     "offset":1,
      "result":
             [
              {
                "host":"x.x.x.x",
                 "count":"123"
               }
             ]
           },
    {"offset":2,"result":[{"host":"y.y.y.y","count":"1123"}]}
]

我想在 HTML 中填充 下拉选择，以仅显示 JSON 字符串 中的“主机”列表。我已经在使用引导框架。有没有办法在引导程序中做到这一点？如果不是 jquery？

【问题讨论】：

你不能用 CSS 做到这一点，因此不能用 bootstrap 本身。另请注意，count-entry 在123" 之前缺少"。
@Peanut 这是一个错字...已更正。
@SunilPachlangia 我想用 JSON 数据中与键“主机”对应的所有值填充一个选择标签....我如何在 jquery 中做到这一点
你的 json 字符串是 PHP 还是 JS？可以帮助您的信息要少一些。请接受这样一个事实，即这不是“请为我编写代码”平台。您应该自己尝试一下，或者至少向我们展示您已经尝试过的内容。
@steven 我的 json 在 php.ini 中。我通过 api 调用填充它。

标签： html json twitter-bootstrap select

【解决方案1】：

这是 javascript 和 bootstrap 中相同 json 的简单实现

HTML

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="list"></ul>
</div>

var json = [
    {
        "offset":1,
        "result":
             [
              {
                "host":"x.x.x.x",
                 "count":"123"
               }
             ]
    },
    {
        "offset":2,
        "result":
            [
                {
                    "host":"y.y.y.y",
                    "count":"1123"
                }
            ]
    }
];
var htmlStr = "";
json.forEach(function(x){
    var li = '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">' + x.result[0].host +' </a></li>';
    htmlStr += li;
});

$('#list').html(htmlStr);

https://jsfiddle.net/jigardafda/p4x8mke2/

【讨论】：

这行得通:)....谢谢。但是您如何将 var json 指向生成 JSON 的 php 文件？而不是在源代码中包含它？
<?php $ar = array('apple', 'orange'); ?> <script type="text/javascript"> var json = <?php echo json_encode($ar) ?>; alert(json); </script> 你可以这样做。示例代码 - gist.github.com/jigardafda/…

【解决方案2】：

您必须为此使用parseJSON

HTML 代码

<div>
   <select id="showDrop">
       <option value="">Select One</option>
    </select>    
</div>

使用此 json 数据的脚本

var jsonData = '[{"offset":1,"result":[{"host":"x.x.x.x","count":"123"}]},{"offset":2,"result":[{"host":"y.y.y.y","count":"1123"}]}]';

var obj = $.parseJSON( jsonData );

var dropOption = '<option value="'+obj[0].result[0].host+'">'+obj[0].result[0].host+'</option><option value="'+obj[1].result[0].host+'">'+obj[1].result[0].host+'</option>'

$('#showDrop').append(dropOption);

工作Jsfiddle

【讨论】：