Как я могу скрыть значение по умолчанию <select> <option> при нажатии на раскрывающийся список?

Я хочу иметь элемент <select>, который по умолчанию выбран "____" . Другими словами, пустое.

Когда выпадающее меню сфокусировано, я хочу, чтобы опция "____" не была в параметрах, которые можно выбрать. Таким образом, пользователь должен выбрать что-то другое, кроме "____" в качестве опции.

Это имеет смысл?

Иллюстрации

Закрыто:

Closed select menu

Открыт:

Opened select menu

Как вы можете видеть, опция "___" отсутствует в списке при ее выборе. Это мой желаемый конечный результат.

Я попытался использовать события onFocus для удаления параметров, но это просто не сфокусирует элемент и заменяет параметр по умолчанию другим.

Ответы

Ответ 1

Чтобы скрыть параметр по умолчанию, позволяя другим показывать, есть несколько способов.

К сожалению, вы не можете скрыть элементы элементов во всех браузерах. Опять же, display:none; не работает во всех браузерах на options...

В прошлом, когда мне нужно было это сделать, я установил свой отключенный атрибут, например...

$('option').prop('disabled', true);

Затем я использовал скрытие, где он поддерживается в браузерах, используя этот кусок CSS...

select option[disabled] {
    display: none;
}

Ответ 2

Вы можете использовать атрибут hidden в HTML. Попробуйте в этом примере

<select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Отметьте fiddle или скриншоты ниже.

Перед нажатием кнопки: перед нажатием

После нажатия: введите описание изображения здесь

Ответ 3

CSS - ваш друг, установите отображение: none для параметра, который вы хотите скрывать.

<select>
<option style="display:none" selected="selected" value=""> </option>
<option value="visi1">Visible1</option>
<option value="visi2">Visible2</option>
<option value="visi3">Visible3</option>
</select>

Здесь дополнительный с jQuery, который гарантирует, что первая опция любого выбора невидима:

$('select:first-child').css({display:none;});