V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dive into HTML5
http://diveintohtml5.org/
fanne
V2EX  ›  HTML

js html()覆盖请教一个层级关系

  •  
  •   fanne · 2018-09-03 17:25:31 +08:00 · 2839 次点击
    这是一个创建于 2307 天前的主题,其中的信息可能已经有所发展或是发生改变。
    html 代码
    <div class="row">
            <div class="col-sm-6">
                <select class="form-control m-b" name="server_lists" id="server_lists">
                <option>选择服务器</option>
                    {% for server_i in server_lists %}
                    <option value="{{ server_i.id }}">{{ server_i.public_ip }}</option>
                    {% endfor %}
                </select>
            </div>
        <div class="col-sm-6 pull-right">
            <select class="form-control m-b" name="server_lists" id="server_lists">
            <option>选择服务器</option>
                {% for server_i in server_lists %}
                <option value="{{ server_i.id }}">{{ server_i.public_ip }}</option>
                {% endfor %}
            </select>
        </div>
        </div>
    
    <div class="row">
        <div class="col-sm-6">
    
        <button type="button" class="btn btn-default" id='select-all'>全选</button>
        <button type="button" class="btn btn-default" id='deselect-all'>全不选</button>
    
            <select id='pre-selected-options' multiple='multiple' name="game_id">
    
            </select>
        </div>
    </div>
    
    <br>
    
    <div class="row">
        <div class="col-sm-4">
            <button class="btn btn-primary"   type="button" onclick="mtSelect(this)">
                开始迁移
            </button>
    
        </div>
    
    js 代码
    <script type="text/javascript">
    $(document).ready(function () {
        $('#pre-selected-options').multiSelect();
            $('#select-all').click(function(){
                $('#pre-selected-options').multiSelect('select_all');
                    return false;
            });
            $('#deselect-all').click(function(){
              $('#pre-selected-options').multiSelect('deselect_all');
              return false;
            });
    
        $("#server_lists").change(function () {
            var server_i = $("#server_lists").val();
            $.ajax({
                data: {'obj_id': server_i, csrfmiddlewaretoken: '{{ csrf_token }}'},
                type: 'POST',
                url: '/pro1/gamemigratedata/' + server_i + '/',
                success: function (data) {
                    var content = '';
                    $.each(data, function (i, item) {
                        content += '<option value='+'"'+item.gameid+'"'+'>'+item.gameid+'</option>'
    
                    });
                    alert(content);
                    $("#pre-selected-options").html(content)
                }
                
            })
        });
    
    });
    
    </script>
    
    

    问题如下:

    应该是 js 的一个层级关系覆盖了 alert(content);是有内容的

    $("#pre-selected-options").html(content)内容为空的

    后来测试把

    $('#pre-selected-options').multiSelect();
    

    注释了就正常,但那个多选框功能不全

    那现在这个情况要怎么改的?

    2 条回复    2018-09-04 09:03:16 +08:00
    Hasel
        1
    Hasel  
       2018-09-03 21:03:34 +08:00
    你可以在$("#pre-selected-options").html(content) 后面再初始化 multiSelect 试试。
    fanne
        2
    fanne  
    OP
       2018-09-04 09:03:16 +08:00
    @Hasel 可行,不过那个多选框多样式没了,等到选完服务器后,初始化 multiSelect 就正常样式,不过功能能用了,多谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2849 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 11:28 · PVG 19:28 · LAX 03:28 · JFK 06:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.