Выпадающий список не отображается

Question

У меня проблема с jQuery dropdownchecklist , которая не отображает параметры при нажатии. Список выбора создается внутри разборного элемента div, а разборный элемент div создается на боковой панели. Я уже установил z-index для выбора в 30000, но безрезультатно. Пожалуйста, помогите мне.

Вот мой код: HTML:

<div class="panel panel-default">
    <div class="panel-heading" role="tab">
        <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">主題圖層</a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
        <select name="other-layer-select" id="other-layer-select" multiple="multiple">
            <option>單位註記</option>
            <option>指揮部</option>
            <option>欺敵符號</option>
            <option>設施類</option>
        </select>

        <div class="panel-body">
            <label class="color_red">*拖曳項目可調整圖面上顯示之階層</label>
            <div id="div_otherLayer_content"></div>
        </div>
    </div>
</div>

JS:

$(function () {
    var sidebar = $('#sidebar').sidebar({
        position: 'right',
    });
});

$('#other-layer-select').dropdownchecklist({
    icon: {},
    width: 200,
    zIndex: 30000
});