主页 / 问题 / 699624
Accepted
YourDeveloper
Asked:2020-07-30 20:09:11 +0000 UTC2020-07-30 20:09:11 +0000 UTC

如何为选择制作占位符

  • 772

如何做到这一点，例如США，当您选择时，单词会Выбранная страна保留下来。也就是说Выбранная страна:，无论选择哪个国家，它们都必须始终在内部。

<select name="country">
  <option value disabled selected>Выбранная страна: Россия</option>
  <option>Россия</option>
  <option>США</option>
  <option>Турция</option>
  <option>Китай</option>
</select>

javascript

2 个回答

  1. Best Answer

    你可以这样做：

    1. 放在select一个单独的容器中，例如.block；

    2. 添加到.block另一个块，例如，.placeholder我们将在其中显示文本“Selected country：”+所选的文本option，并将其放在顶部select；

    3. 对于.placeholder在 css 中我们指定pointer-events:none;是为了不干扰点击select

    在 jQuery 中它看起来像这样：

    function selPlaceholder(block) {
  var placeholder = block.find('.placeholder'),
    select = block.find('select');
  placeholder.text(placeholder.attr('data-text') + select.find('option:selected').text());
}

$('.block').each(function() {
  selPlaceholder($(this));
});

$('.block select').on('change', function() {
  selPlaceholder($(this).closest('.block'));
});
    .block,
.block select {
  position: relative;
  width: 300px;
  font-family: 'Arial';
  font-size: 12px;
}

.block .placeholder {
  position: absolute;
  z-index: 1;
  left: 5px;
  top: 2px;
  pointer-events: none;
  background: #fff;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <div class="placeholder" data-text="Выбранная страна: "></div>
  <select name="country">
    <option>Россия</option>
    <option>США</option>
    <option>Турция</option>
    <option>Китай</option>
  </select>
</div><br /><br />
<div class="block">
  <div class="placeholder" data-text="Выбранный тип аккаунта: "></div>
  <select name="type">
    <option>Бесплатный</option>
    <option>Профессиональный</option>
    <option>Для бизнеса</option>
  </select>
</div><br /><br />
<div class="block">
  <div class="placeholder" data-text="Выбранная валюта: "></div>
  <select name="currency">
    <option>USD</option>
    <option>EUR</option>
    <option>RUB</option>
    <option>UAH</option>
  </select>
</div>

    • 10

  2. 我遇到了类似的问题。折腾了半天，想出了一个CSS的方法

    .div_wrap{
  position: relative;
  width: 300px;
  height: 40px;
  margin-top: 40px;
}
.select{
  position: absolute;
  width: 300px;
  height: 40px;
}
/* Вид Placeholder */
.label{
  width: 100px;
  height: 40px;
  padding: 8px;
  text-align: center;
  position: absolute;
  pointer-events: none;
  color: #687a86;
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  top: 0px;
  transition: 0.8s;
}
/* Здесь то что будет происходить с Placeholder'ом после изменения select */
.select:valid+.label {
  color: black;
  top: -35px;
  width: 300px;

}
    <div class="div_wrap">
  <select required class="select">
    <option selected value=""></option>
    <option value="1">Пункт 1</option>
    <option value="2">Пункт 2</option>
    <option value="3">Пункт 3</option>
  </select>
  <label class="label">Ваш Выбор:</label>
</div>

    • 0

相关问题