開いている選択オプションの一番下に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

は、そのdiv要素と位置が絶対的な設定されています複数選択の場合はheightsに基づいています。はい@DaniP

$(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