所选下拉菜单的浮动标签

Question

我正在使用选择的下拉菜单，根据要求我想要一个浮动标签，我试过了但没有用。请检查下面我的代码，让我知道我在哪里犯了错误。提前致谢

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

label {
  font-size: 16px;
  color: #C2185B;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  transition: all 0.2s ease 0s;
}

label.selected {
  top: -20px;
  font-size: 12px;
  transform: translateY(0);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<div class="col-md-6">
  <div class="form-group">
    <label for="select">Floating label</label>
    <select data-placeholder="" class="form-control chosen-select" style="width:350px;" tabindex="4">
      <option value=""></option>
      <option value="Any">[Any]</option>
      <option value="United States">United States</option>
    </select>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>

Answer 1

阅读更多有关选择事件的信息 here。

工作示例：

$('.chosen-select').chosen().on('chosen:showing_dropdown', (elm) => {
  const targetLabel = $(elm.target).prev('label');
  targetLabel.addClass('selected');
}).on('chosen:hiding_dropdown', (elm) => {
  const target = $(elm.target);
  const targetLabel = target.prev('label');
  const targetOptions = $(elm.target.selectedOptions);
  if (targetOptions.length === 0) {
    targetLabel.removeAttr('class');
  }
});

label {
  font-size: 16px;
  color: #C2185B;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  transition: all 0.2s ease 0s;
}

label.selected {
  top: -5px;
  font-size: 12px;
  transform: translateY(0);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<div class="col-md-6">
  <div class="form-group">
    <label for="select">Floating label</label>
    <select data-placeholder="" class="form-control chosen-select" style="width:350px;" tabindex="4">
      <option value=""></option>
      <option value="Any">[Any]</option>
      <option value="United States">United States</option>
    </select>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>

编辑：

$('.chosen-select-deselect').chosen().on('chosen:showing_dropdown', (elm) => {
    const targetLabel = $(elm.target).prev('label');
    targetLabel.addClass('selected');
}).on('change', (elm) => {
    const target = $(elm.target);
    const targetLabel = target.prev('label');
    const targetOptions = $(elm.target.selectedOptions);
    if ($(target).val() === "") {
        targetLabel.removeAttr('class');
    }
}).on('chosen:hiding_dropdown', (elm) => {
    const target = $(elm.target);
    const targetLabel = target.prev('label');
    if ($(target).val() === "") {
        targetLabel.removeAttr('class');
    }
});

$('.chosen-select-deselect').trigger('chosen:updated')

Answer 2

我在为 'Chosen' select 控件添加浮动标签时遇到了同样的挑战。这是一个对我有用的简单解决方案：

.csHTML (.NET):

<div class="form-floating rowSpace">
       <select asp-items="Model.InterestGroupsList" class="form-control" data-placeholder="Select one or more" multiple id="myInterestSelect">
       </select>
      <label for="myInterestSelect">My interests (select one or more)<span class="required">&nbsp;*</span></label>
      <span asp-validation-for="InterestGroupIDs" class="text-danger"></span>
</div>

这是修复显示问题的CSS：

    .form-floating > .form-control:focus, .form-floating > .form- 
    control:not(:placeholder-shown) {
      padding-top: 1.625rem;
      padding-bottom: .225rem;
   }

   .chosen-container-multi .chosen-choices {
        padding-top: 30px !important;
        padding-bottom: 6px !important;
    }

在浏览器中呈现时的外观如下：

所选下拉菜单的浮动标签

Floating label for chosen dropdown

javascript

jquery

jquery-chosen