怎么样把 js 中 post 后得到的 success 中的 data 内容写入到 html 中<select><option></option></select>中的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2787 天前的主题，其中的信息可能已经有所发展或是发生改变。

js 内容

$(document).ready(function () {
        $("#id_plat_select").change(function () {
            $.ajax({
                type:"POST",
                url:"/abc/time/",
                data:{plat_name:$("#id_plat_select").val()},
                dataType:"json",
                success:function (data) {
                    json_data = JSON.parse(data)
                    for (var i=0;i<= json_data.length;i++){
                        alert(json_data[i].fields.serverName)
                    }
                }
            })
        })
    })

html 内容

<select id="id_server_select" class="form-control selectpicker" name="serverId" data-live-search="true" data-size="10">
	<option>选择内容</option>
</select>

就怎么把循环出来的 json_data[i].fields.serverName 写到<option></option>里的？

8 条回复 • 2017-04-11 17:31:19 +08:00

IceBay

2017-04-11 14:44:51 +08:00

jquery 有个 append 方法。
组合成 option 的 html 后，使用 jquery 的 appen 在后面追加进去。

shew2356

2017-04-11 15:38:58 +08:00

我猜，你估计是想问 ajax 同步，异步的问题把。

shew2356

2017-04-11 15:40:23 +08:00

还有添加子节点之前，清空下父节点。

Mitt

2017-04-11 16:03:22 +08:00

用 jQuery 的话很简单就是
$('<option></option>').text('serverName').attr('value', 'serverValue').appendTo($('#id_server_select'));
非 jQuery 的话同理只是麻烦一点建议多谷歌 | 百度

fanne

2017-04-11 16:08:46 +08:00

@icebay1998 @Mitt
恩恩，是这个方法，用 append 搞定了
$(document).ready(function () {
$("#id_plat_select").change(function () {
$.ajax({
type:"POST",
url:"/items/kaifu_time/",
data:{plat_name:$("#id_plat_select").val()},
dataType:"json",
success:function (data) {
json_data = JSON.parse(data)
for (var i=0;i<= json_data.length;i++){
server = json_data[i].fields.serverName;
$("#id_server_select").append("<option value="+ server +">" + server + "</option>");
}
}
})
})
})

不过遇到一个新的问题
<select id="id_plat_select" class="form-control selectpicker" name="id_plat_select" data-live-search="true" data-size="10"></select>

<select>这里面有个样式 selectpicker ，这样式用来下拉时候有个搜索框的，只有去掉这个样式，添加的<option>才能显示，加上这个样式，添加的<option>就无法显示

这样如何解决，去掉这个样式后，就没用了下拉搜索框功能了。

fanne

2017-04-11 16:09:28 +08:00

@shew2356 不不不，我就想单纯的给 select 添加 option ，现在可以添加了，但有新的问题。

Mitt

2017-04-11 16:53:38 +08:00

@fanne $('.selectpicker').selectpicker('refresh'); 初始化后添加的 option 需要刷新一遍或者重新初始化一遍才能使用这些文档上都有建议这类问题多查文档找解决方案

fanne

2017-04-11 17:31:19 +08:00

@Mitt 好的，多谢。