Заполнитель для тега `select`?

Question

Заполнитель для тега `select`?

Мне интересно, как добиться эффекта заполнителя с помощью тега select , это было бы действительно Приятно иметь по умолчанию выбранную опцию вроде «Пожалуйста, выберите вариант:».

Я пробовал несколько вариантов, и они пока не работают, и я уверен, что это может быть достигнуто, потому что я где-то видел это (может ' не помню где).

Я пробовал это:

1)

<fieldset>
            <select data-placeholder="Please select a product" id="s1" class="global">
                <option value="Some">Some</option>
                <option value="Slower">Slower</option>
                <option value="Slow">Slow</option>
                <option value="Fast">Fast</option>
                <option value="Faster">Faster</option>
            </select>
</fieldset>

2)

<fieldset>
            <select id="s1" class="global">
                <option data-placeholder="true"  value="Some">Some</option>
                <option value="Slower">Slower</option>
                <option value="Slow">Slow</option>
                <option value="Fast">Fast</option>
                <option value="Faster">Faster</option>
            </select>
</fieldset>

Оба не работают, может быть, есть метод jQuery для этого?

Быстрое редактирование: Я НЕ хочу просто отключать одну из опций и выбирать ее , потому что он по-прежнему будет отображаться в раскрывающемся списке вместе с другими элементами.

22

javascript jquery html css

задан Ricardo 3 December 2011 в 15:54

1 ответ

Другие вопросы по тегам:

javascript jquery html css

Похожие вопросы:

score 26 · Accepted Answer

Вот два типа заполнителей, которые можно выбрать повторно и скрыть:

Демонстрация: http://jsfiddle.net/lachlan/FuNmc/

Возможность повторного выбора заполнитель:

<select>
    <option value="" selected>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

Скрытый заполнитель:

<select class="empty">
    <option value="" selected disabled>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

CSS для изменения цвета первого элемента:

select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }

И немного jQuery для переключения шрифта цвет после выбора:

// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
    $(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');

Вдохновение:
https://stackoverflow.com/a/5805194/1196148 - повторно выбираемый заполнитель
https://stackoverflow.com/a/8442831/1196148 - скрытый заполнитель