9

Как сделать так, чтобы при выборе, к примеру, США, слова Выбранная страна оставались. То есть Выбранная страна: постоянно должны быть внутри независимо от выбора страны.

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

4
  • Без js тут не обойтись
    – Cheg
    30 июл 2017 в 12:25
  • Есть примеры на js? Просто не могу загуглить даже это 30 июл 2017 в 12:39
  • Примеров нет, но можнот написать самому
    – Cheg
    30 июл 2017 в 12:56
  • 2
    Можно попробовать сделать еще 1 элемент с текстом "Выбранная страна:" с абсолютным позиционированием на нужном месте, а внутри селекта добавить отступ слева.
    – Sapphiron
    30 июл 2017 в 12:58

2 ответа 2

10

Сделать можно так:

  1. помещаем select в отдельный контейнер, например, .block;

  2. добавляем в .block еще один блок, например, .placeholder, в который будем выводить текст "Выбранная страна:" + текст выбранной 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>

0

Сталкнулся с аналогичной проблемой. После долгих мучений придумал выход на 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.