Страницы

Поиск по вопросам

понедельник, 15 октября 2018 г.

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

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


Ответ

Сделать можно так:
помещаем 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; }






Комментариев нет:

Отправить комментарий