Как сделать так, чтобы при выборе, к примеру, США, слова Выбранная страна оставались. То есть Выбранная страна: постоянно должны быть внутри независимо от выбора страны.
Ответ
Сделать можно так:
помещаем 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;
}
Комментариев нет:
Отправить комментарий