根據選擇的框選擇元素

我使用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

根據選擇的框選擇元素

回答

相關問題