How to apply floating label to select2 dropdown?

Issue

I’m using select2 plugin for select dropdown. I have more than one select dropdown boxes in the page and I need to apply the floating label to the selected dropdown.

I have tried and googled but I could not find any desired results as I expected.

I have provided the code that I have tried so far.

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

Solution

Try the following

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

Answered By – sravs

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0