根据选择的框选择元素

我使用Twitter Bootstrap 2.3.2和chosen plugin来选择框。我想问我怎样才能根据框与选定的项目对齐其他元素。根据选择的框选择元素

在此屏幕截图中，您可以在选择框下看到两个选择框和内容（元素）。

enter image description here

当我选择了一些项目，盒子重叠框下标题“源”和物品。我想在选择某些选项时将元素对齐，并在取消选项时将对齐项（向后）对齐。

enter image description here

HTML

<div id="filter"> 

<div id="personFilter" class="form-group"> 

        <h4> Person filter </h4> 

        <div id="personFilterContain"> 

         <h5> Contain </h5> 

         <select data-placeholder= "address" 
           name="personContainSelect" multiple class="selectPerson"><option value="0"> </option><option value="2">[email protected]</option><option value="3">[email protected]</option><option value="4">[email protected]</option><option value="5">[email protected]</option><option value="6">[email protected]</option><option value="7">[email protected]</option><option value="8">[email protected]</option><option value="9">[email protected]</option><option value="10">[email protected]</option></select> 

        </div> 

        <div id="personFilterNotContain"> 

         <h5> Dont contain </h5> 

         <select data-placeholder="address" 
           tabindex="4" name="personNotContainSelect" multiple class="selectPerson"><option value="0"> </option><option value="2">[email protected]</option><option value="3">[email protected]</option><option value="4">[email protected]</option><option value="5">[email protected]</option><option value="6">[email protected]</option><option value="7">[email protected]</option><option value="8">[email protected]</option><option value="9">[email protected]</option><option value="10">[email protected]</option></select> 

        </div> 

        <div class="checkbox"> 
         <label> 
          <input type="checkbox" name="personCheckBox"> Apply 
         </label> 
        </div> 

       </div> 

       <!-- ********************* Source Filter ********************* --> 

       <div id="sourceFilter" class="form-group"> 

       <h4> Source </h4> 

        <div id="sourceFilterSource"> 

         <label class="checkbox inline"> 
         <input type="checkbox" name="sourceMailCheckBox"> Mail 
         </label> 

         <label class="checkbox inline"> 
         <input type="checkbox" name="sourcePhoneCheckBox"> Phone 
         </label> 

         <label class="checkbox inline"> 
         <input type="checkbox" name="sourceDiscussionCheckBox"> Discussion 
         </label> 

        </div> 
</div> 
<script> 
$(document).ready(function() { 
    $('select[name=personNotContainSelect]', this).chosen(); 
    $('select[name=personContainSelect]', this).chosen(); 
}); 
</script>

CSS

#filter{ 
    text-align: center; 
} 

#filter, #details{ 
    overflow: auto; 
} 

#filter h4{ 
    text-align: left; 
} 

#personFilter, #sourceFilter{ 
    width: 535px; 
    height: 200px; 
    margin: 0 auto; 
    display: inline-block; 
} 

#personFilter{ 
    height: 100px; 
    margin-top: 27px; 
    display: inline-block; 
} 

#personFilter h5{ 
    max-width: 200px; 
    padding-left: 1px; 
    text-align: left; 
    margin-bottom: 5px; 
} 

#personFilter select{ 
    width: 250px; 
} 

#personFilter div{ 
    display: inline-block; 
} 

#personFilterContain{ 
    max-width: 400px; 
    float:left; 
} 

#personFilterNotContain{ 
    max-width: 400px; 
    float: left; 
    margin-left: 30px; 
} 

#personFilter label:last-child{ 
    width: 0; 
} 

#personFilter .chosen-container{ 
    top:-30px; 
} 

#personFilter .checkbox{ 
    width: 300px; 
    float: left; 
    margin-top: -10px; 
} 

#sourceFilter { 
    text-align: left; 
    margin-top: 21px; 
    position: relative; 
} 

#sourceFilterSource{ 
    margin-top: 15px; 
}

来源

2014-11-08 Matt

除去用于'＃personalFilter'高度：http://jsfiddle.net/b71e7w3k/2/ ???或者用min-height代替http://jsfiddle.net/b71e7w3k/3/？ – 2014-11-08 18:02:06

@ A.Wolff感谢您的帮助，它可能是解决方案的一部分，但我忘了提及“当选项被取消选择时对齐元素（后退）” – Matt 2014-11-08 18:13:52

组ID为ATTR选择（例如G。测试）：

<select id="test" data-placeholder= "address"... 
... 
</select>

add change event。请注意#test_chosen，类似ID从<select>。后缀_chosen由插件添加。

$('select[name=personContainSelect]', this).chosen().change(function(){   
     var h=$('#test_chosen').height() 
     h+=56;//init height of chosen    
     $('#personFilter').height(h) 
    });

解决方案2： CSS

#personFilter{ 
    height: auto; 
}

来源

2014-11-08 19:44:34 dm4web

感谢您的帮助，我想知道它可以通过CSS来解决它，但是这也是另一种方式。 – Matt 2014-11-09 10:34:39

谢谢解决方案2在我的答案 – dm4web 2014-11-09 11:10:41

根据选择的框选择元素

回答

相关问题