V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
fanne
V2EX  ›  JavaScript

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

  •  
  •   fanne · 2017-04-11 14:28:15 +08:00 · 2712 次点击
    这是一个创建于 2543 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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
        1
    IceBay  
       2017-04-11 14:44:51 +08:00
    jquery 有个 append 方法。
    组合成 option 的 html 后,使用 jquery 的 appen 在后面追加进去。
    shew2356
        2
    shew2356  
       2017-04-11 15:38:58 +08:00
    我猜,你估计是想问 ajax 同步,异步的问题把。
    shew2356
        3
    shew2356  
       2017-04-11 15:40:23 +08:00
    还有添加子节点之前,清空下父节点。
    Mitt
        4
    Mitt  
       2017-04-11 16:03:22 +08:00
    用 jQuery 的话很简单 就是
    $('<option></option>').text('serverName').attr('value', 'serverValue').appendTo($('#id_server_select'));
    非 jQuery 的话同理 只是麻烦一点 建议多谷歌 | 百度
    fanne
        5
    fanne  
    OP
       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
        6
    fanne  
    OP
       2017-04-11 16:09:28 +08:00
    @shew2356 不不不,我就想单纯的给 select 添加 option ,现在可以添加了,但有新的问题。
    Mitt
        7
    Mitt  
       2017-04-11 16:53:38 +08:00   ❤️ 2
    @fanne $('.selectpicker').selectpicker('refresh'); 初始化后添加的 option 需要刷新一遍 或者重新初始化一遍才能使用 这些文档上都有 建议这类问题多查文档找解决方案
    fanne
        8
    fanne  
    OP
       2017-04-11 17:31:19 +08:00
    @Mitt 好的,多谢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3360 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 13:14 · PVG 21:14 · LAX 06:14 · JFK 09:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.