Как сделать placeholder для select

#javascript #html #jquery #css #html_select

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




  Выбранная страна: Россия
  Россия
  США
  Турция
  Китай




    

Ответы

Ответ 1

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


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


  

  
    Россия
    США
    Турция
    Китай
  




  

  
    Бесплатный
    Профессиональный
    Для бизнеса
  




  

  
    USD
    EUR
    RUB
    UAH