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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3344 days ago, the information mentioned may be changed or developed.

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 replies • 2017-04-11 17:31:19 +08:00

icebay

Apr 11, 2017

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

shew2356

Apr 11, 2017

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

shew2356

Apr 11, 2017

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

Mitt

Apr 11, 2017

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

fanne

Apr 11, 2017

@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

Apr 11, 2017

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

Mitt

Apr 11, 2017

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

fanne

Apr 11, 2017

@Mitt 好的，多谢。