鍍金池/ 問答/HTML/ js html()覆蓋請教一個層級關(guān)系

js html()覆蓋請教一個層級關(guān)系

html代碼
<div class="row">
        <div class="col-sm-6">
            <select class="form-control m-b" name="server_lists" id="server_lists">
            <option>選擇服務(wù)器</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>選擇服務(wù)器</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>

問題如下:

clipboard.png

應(yīng)該是js的一個層級關(guān)系覆蓋了
alert(content);是有內(nèi)容的
$("#pre-selected-options").html(content)內(nèi)容為空的

后來測試把

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

注釋了就正常,但那個多選框功能不全

clipboard.png

那現(xiàn)在這個情況要怎么改的?

回答
編輯回答
汐顏

不知道這個multiSelect是什么組件,jqueryui?沒找到,不過很多組件都是自行用div和span構(gòu)建的,不一定用原生的標(biāo)簽.即使是用,也是在初始化的之前就需要把基本信息寫進去,后期動態(tài)修改就得看組件是否給接口了.你這個應(yīng)該不是html的范圍問題,是初始化時機問題.
看一看這個組件是否提供了相應(yīng)的方法動態(tài)修改選項,或者在用html()之前銷毀之前的組件,加入option之后重新初始化一個.

2017年4月12日 07:51