在打开的Select选项的底部动态附加div

Question

我有一个下拉列表，当我显示列表时，我试图将div附加到它。为此，我有事件onDropdownShow和onDropdownHide。  当列表未加载时，div也应该消失。如何显示/隐藏显示列表底部的div？有什么想法吗？

引用

<script type="text/javascript" src='http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js'></script>
<link rel="stylesheet" href='http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css'>
<script type="text/javascript" src='https://github.com/nobleclem/jQuery-MultiSelect/blob/master/jquery.multiselect.js'></script>

脚本

<script type="text/javascript">
    $(document).ready(function () {
            $('#example-post-checkboxName').multiselect({
                enableFiltering: true,
                enableClickableOptGroups: true,
        enableCollapsibleOptGroups: true,
        includeSelectAllOption: true,
        onDropdownShow: function (select, container) {
                //show div
        },
        onDropdownHide: function (event) {
           // hide div
        }
            });
    });
</script>

HTML

 <div class="form-group">
        <label class="col-sm-2 control-label">Multiselect</label>
        <div class="col-sm-10">
            <div id="theParentx">
                <select id="example-post-checkboxName" name="multiselect[]" multiple="multiple" required>
                      <optgroup label="The group">
                      <option>a</option>
                      <option>b</option>
                      <option>c</option>
                  </optgroup>
                </select>
                <div id="theChildx" class="testStyle">
                     -> the attached div <-
                </div>
            </div>
        </div>
    </div>

Answer 1

您需要做的是根据多选的heights设置div和position绝对值。检查一下：

$(document).ready(function() {
  $('#example-post-checkboxName').multiselect({
    onDropdownShow: function (select, container) {
        var siz = parseInt($('#theParentx').height(),10) + parseInt($('#theParentx .multiselect-container').height(),10) + parseInt($('#theChildx').height(),10);
        $('#theChildx').css('top',siz+"px").show();
    },
    onDropdownHide: function (event) {
        $('#theChildx').hide()
    }
  });
});

DemoFiddle