如何將浮動標籤應用於select2下拉菜單？

Question

我正在使用select2插件進行選擇下拉菜單。我在頁面中有多個選擇下拉框，我需要將浮動標籤應用到選定的下拉框中。

我試過了，但是我找不到任何想要的結果，因爲我期望。

我已經提供了我到目前爲止嘗試過的代碼。

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 col-lg-6 col-sm-6"> 
     <label class="hor-menu visible-xs visible-xs control-label col-sm-1"></label> 
     <div class="form-group form-md-line-input form-md-floating-label" style="margin-top: 13px;"> 
     <select name="cboNGrp" id="cboNGrp" class="form-control select2me input-xlarge" data-live-search="true" data-size="8"></select> 
     <label class="form_control_1 head_ctrl_label" style="padding-top: 2px;">Type</label> 
     </div> 
    </div> 
    <div class="col-md-6 col-lg-6 col-sm-6"> 
     <div class="form-group form-md-line-input head_ctrl"> 
     <label class="hor-menu visible-xs visible-xs control-label col-sm-1"></label> 
     <select name="cboEmrGrp" id="cboEmrGrp" class="select2me form-control input-xlarge"></select> 
     <label class="form_control_1 head_ctrl_label">E/M</label> 
     </div> 
    </div> 
    </div> 
</div> 

JS

$('.select2me').click(function(e){ 
    if($(this).find('select2-dropdown-open')) { 
     $('label.head_ctrl_label').css('margin-top', '-25px'); 
    } 
    e.preventDefault(); 
}); 

Image showing user clicks the Dropdown to select Option

Image showing the bug floating label applies to all the dropdown not only selected one

Answer 1

請嘗試以下

$('.select2me').click(function(e){ 
    if($(this).find('select2-dropdown-open')) { 
     $(this).next('.head_ctrl_label').css('margin-top', '-25px'); } 
     e.preventDefault(); 
});