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

2018-09-03 17:25:31 +08:00
 fanne
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();

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

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

2658 次点击
所在节点    HTML
2 条回复
Hasel
2018-09-03 21:03:34 +08:00
你可以在$("#pre-selected-options").html(content) 后面再初始化 multiSelect 试试。
fanne
2018-09-04 09:03:16 +08:00
@Hasel 可行,不过那个多选框多样式没了,等到选完服务器后,初始化 multiSelect 就正常样式,不过功能能用了,多谢

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

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

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

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

© 2021 V2EX