如何将浮动标签应用于 select2 下拉菜单？答案

【问题标题】：How to apply floating label to select2 dropdown?如何将浮动标签应用于 select2 下拉菜单？
【发布时间】：2017-03-27 12:44:18
【问题描述】：

我正在使用 select2 插件来选择下拉菜单。我在页面中有多个选择下拉框，我需要将浮动标签应用于所选下拉列表。

我已经尝试并在 Google 上搜索过，但找不到任何预期的结果。

我已经提供了到目前为止我尝试过的代码。

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>

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

【问题讨论】：

上面的JS代码是可行的，但适用于页面中的所有选择框。我需要将代码应用到用户选择的当前选择框。
用你的代码创造一个小提琴
使用 $(' select2-dropdown-open.head_ctrl_label ').css('margin-top', '-25px');在js中
否，$(' select2-dropdown-open.head_ctrl_label ').css('margin-top', '-25px');不工作。
@sravs，JS 代码有效，但当我尝试选择一个下拉菜单时，将 -25 边距应用于所有选择的下拉菜单。请检查我附上的图片。

标签： jquery html css twitter-bootstrap

【解决方案1】：

希望对您有所帮助！

$('select').select2().on('select2:open', (elm) => {
    const targetLabel = $(elm.target).prev('label');
    targetLabel.addClass('selected');
}).on('select2:close', (elm) => {
    const target = $(elm.target);
    const targetLabel = target.prev('label');
    const targetOptions = $(elm.target.selectedOptions);
    if (targetOptions.length === 0) {
        targetLabel.removeClass('selected');
    }
});

SCSS

label {
    &.selected {
        top: 0;
        font-size: 11px;
        transform: translateY(0);
    }
    font-size: 16px;
    color: #dfdfdf;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    transition: all 0.2s ease 0s;
}

Code pen explanation

【讨论】：

请解释你的回答。
@MrMaavin，见上面的链接。
代码笔链接？ @MartinScheer 这不是解释。它只提供了一个完整的例子。有一个完整的例子也很好，但也许你可以解释你做了什么来解决问题以及为什么。
@MrMaavin，'sravs' 提供的答案已被接受。我希望'MrMaavin'代码在select2打开和关闭时将selected类应用于label。

【解决方案2】：

试试下面的

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

【讨论】：