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

Мне интересно, как достичь эффекта placeholder с тегом 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, чтобы сделать это?

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

Ответы

Ответ 1

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

Демо: 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');

Вдохновение:
fooobar.com/questions/11215/... - переупорядочиваемый заполнитель
fooobar.com/questions/11215/... - скрытый placeholder

Ответ 2

Я создал простую демонстрацию, следуя предложению @Truth: http://jsfiddle.net/6QnXF/

(function($){
    $('#myAwesomeSelect').change(function(){
       if( !$(this).data('removedPlaceHolder'))
       {
          $(this).find('option:first').remove();
          $(this).data('removedPlaceHolder', true); 
       }
    });
})(jQuery);

Я надеюсь, что это сработает для вас.

Ответ 3

Насколько я знаю, нет способа сделать это только с HTML (хотя это было бы хорошо). Вы можете подделать его с помощью выбранного варианта (я знаю, что вы этого не хотите, но это, вероятно, единственный способ). После выбора другой опции вы можете удалить ее.

Вот рабочий пример того, что я описываю.

Ответ 4

Я предполагаю, что вам нужно будет создать собственное обходное решение для окна выбора. Что-то вроде серии div, которые действуют как опции, которые при нажатии отображаются, и их значение вставляется в скрытое поле ввода.