javascript - 所选下拉菜单的 float 标签

Question

我正在使用所选的下拉菜单，根据要求，我想要一个 float 标签，我尝试过，但它不起作用。请检查下面的代码并让我知道我在哪里犯了错误。 提前致谢

$('.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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34445b444451461a5e4774051a05021a04" rel="noreferrer noopener nofollow">[email protected]</a>/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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f8889788889d8ad6928bb8c9d6c9ced6c8" rel="noreferrer noopener nofollow">[email protected]</a>/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')