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

2017-04-11 14:28:15 +08:00
 fanne

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

2827 次点击
所在节点    JavaScript
8 条回复
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 好的,多谢。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/354077

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX