опція вибору за замовчуванням як порожня

458

У мене дуже дивна вимога, в якій у спадному меню в HTML мені не потрібно вибирати параметр за замовчуванням. Однак,

Я не можу цим скористатися,

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
Розгорніть фрагмент

Тому що для цього мені доведеться зробити перевірку, щоб обробити перший варіант. Чи може хто-небудь допомогти мені у досягненні цієї мети, не фактично включивши перший варіант як частину тегу select?

html 
— Панкай Парашар
джерело
2
Наскільки мені відомо, це єдиний спосіб отримати порожній рядок. Що ви маєте на увазі, що вам доведеться зробити перевірку? Просто встановіть чек, щоб сказати, якщо value = "", тоді поверніть false.
— Роберт
1
Це буде гарною можливістю використовувати радіо кнопки замість спаду.
— Blazemonger
9
На мою думку, це зовсім не дивна вимога. Я в тому ж човні. Мені також потрібен за замовчуванням "без варіантів". У мене є кілька спадів, які не потрібні для подання форми. Вимкнення їх таким чином заважає користувачеві робити вибір, коли це не доречно. Хороше питання! +1
— Скотт
Не дивна вимога, якщо SELECT мав ЗАЯВЛЕНИЙ атрибут, то наявність опції мітки заповнення є вимогою HTML5 dev.w3.org/html5/spec-preview/…
— Testo Testini
@Blazemonger радіо кнопок - це жахлива ідея, якщо у вас більше 3 або 4. Уявіть, що випадає з 15+ варіантами або 50 або більше? У багатьох є проблеми з дизайном у багатьох випадках, але проблема все ще стоїть у тому, що радіо кнопки взагалі не добре змінюються .
— TylerH

Відповіді:

1013

Можливо, це буде корисно

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option --Буде відображено за замовчуванням. Але якщо ви виберете варіант, ви не зможете його вибрати назад.

Ви також можете приховати це за допомогою додавання порожнього option

<option style="display:none">

тому він більше не відображатиметься у списку

Варіант 2

Якщо ви не хочете писати CSS і очікуєте на таку ж поведінку рішення вище, просто скористайтеся:

<option hidden disabled selected value> -- select an option -- </option>

— Гамбіт
джерело
15
Ось JSFiddle вищезазначеного , на випадок, коли комусь це потрібно.
— Уве Кеїм
26
@azerafati, як @Rafael_Mori вказав, ви можете досягти того ж, використовуючи атрибут "прихований", тому CSS не потрібно. Просто чистий HTML5;)<option hidden disabled selected value> -- select an option -- </option>
— BrainOverflow
Що робити, якщо я хочу мати можливість вибрати його назад? Я просто не хочу, щоб він нічого не надсилав. Це можливо?
— Майкл Роджерс
1
додавання прихованого атрибута до елемента параметра зробило для мене чари! не сподівався, що це буде так просто. дякую
— С. Доменг
Майте в виду, як прихований атрибут і стиль відображення не працюють в IE, навіть 11. stackoverflow.com/questions/58862242 / ...
— yatskovsky
113

Ви можете використовувати Javascript для цього. Спробуйте наступний код:

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

document.getElementById("myDropdown").selectedIndex = -1;

або JQuery

$("#myDropdown").prop("selectedIndex", -1);
— Матчі
джерело
Це рішення частково працює з Chrome 35: спадне меню не показує жодного вибору, коли список параметрів невидимий, але показує перший варіант, вибраний, коли список параметрів стає видимим. Сафарі 7 поводиться, як задумано.
— flochtililoch
Цікавим є те, що це працює з валідацією форми HTML. Якщо ви використовуєте requiredатрибут на selectелементі та подаєте, не вибираючи опцію, перевірка форми завершиться невдало і скаже вам, вам потрібно зробити вибір. Тому мені дуже подобається такий підхід. (Принаймні випробувано в Chrome)
— Андреас Ліннерт
Не працює (принаймні, у поточних браузерах станом на це написання - і зайво покладається на javascript.
— silentmouth
1
Станом на 2019 рік, лише Safari IOS 10 відмовляється грати з цим м'ячем
— Айяш
36

Сьогодні (25.02.2015)

Це дійсний HTML5 і надсилає порожній (не пробіл) сервер:

<option label=" "></option>

Підтверджена дійсність на http://validator.w3.org/check

Перевірена поведінка з Win7 (IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10 (Chrome40, FF35) OSX_Yosemite (Safari8, Chrome40) Android (Samsung-Galaxy-S5)

Нижче також проходить перевірку сьогодні , але передається якийсь пробільний символ також серверу з більшості браузерів (мабуть, небажано) та порожнім для інших (Chrome40 / Linux передає порожній):

<option>&#160;</option>

Раніше (02.08.2013)

Згідно з моїми примітками, сукупність об'єктів, що не порушують пробіл, всередині тегів опцій, показаних вище, призвела до наступної помилки у 2013 році:

Помилка: W3C Markup Validaton Service (Public): Перший дочірній елемент елемента вибору з необхідним атрибутом і без кратного атрибута, розмір якого 1, повинен мати або атрибут порожнього значення, або не повинен містити текстового вмісту.

На той час звичайний простір був дійсним XHTML4 і надсилав на сервер порожній (не пробіл):

<option> </option>

Майбутнє

Мені було б радісно моє серце, якби специфікація була оновлена, щоб явно дозволяти пусту опцію. Переважно, використовуючи найменший синтаксис. Будь-яке з наступного було б чудово:

<option />
<option></option>

Тестовий файл

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>
— GlenPeterson
джерело
15 

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>
Розгорніть фрагмент

Просто поставте "прихований" варіант, який ви хочете приховати у спадному списку.

— Рафаель Морі
джерело
8

Рішення, яке працює лише за допомогою CSS:

A: Вбудований CSS

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
Розгорніть фрагмент

B: Таблиця стилів CSS

Якщо у вас є CSS-файл під рукою, ви можете орієнтуватися на перший, optionвикористовуючи:

select.first-opt-hidden option:first-of-type {
  display:none;
}
<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
Розгорніть фрагмент

— Кай Ноак
джерело
4

Це має допомогти:

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>
Розгорніть фрагмент

— рохан параб
джерело
Це найсучасніший (html5) спосіб досягти цієї вимоги, пам’ятайте, що для цього потрібна кнопка type = submit. Кнопка type = кнопка з обробкою передачі onclick не вимагає від користувача автоматично вибору.
— Ар'ян
3 
<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Ви можете уникнути спеціальної перевірки в цьому випадку.

— Фаваз
джерело
2

Лише невелике зауваження:

деякі веб-переглядачі Safari, схоже, не поважають ані "прихованого" атрибута, ані налаштування стилю "display: none" (перевірено Safari 12.1 в MacOS 10.12.6). Без явного тексту заповнювача ці браузери просто показують порожній перший рядок у списку параметрів. Тому може бути корисним завжди надавати пояснювальний текст для цього "манекена":

<option hidden disabled selected value>(select an option)</option>

Завдяки атрибуту "вимкнено" він все одно не буде активно вибиратися.

— Андреас Розек
джерело
1

Я розумію, що ви намагаєтесь зробити. Найкращий і найуспішніший спосіб:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>
— Гуряш Сінгх
джерело
1

Мені це було дуже цікаво, тому що я пережив те саме, що не так давно. Однак я натрапив на приклад в Інтернеті щодо рішення щодо цього.

Не маючи жодних додаткових помилок, дивіться фрагмент коду нижче:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

З цим він залишатиметься нездійсненним, але вибирається в будь-який час. Більше зручності для користувальницького інтерфейсу та чудово для користувачів.

Ну це все, я сподіваюся, що це допомагає. Ура!

— farisfath25
джерело
Якщо зробити це не в змозі подати, а й привернути увагу користувача до випадаючого меню, видається зайвим, але мені подобається пропозиція
— Iofacture
@lofacture: дякую за вклад. насправді код, який я написав, був таким, якого я хотів, але так, як ви сказали, це залежить від потреб користувача / власника
— farisfath25
0

Рішення в HTML немає. За специфікацією HTML 4.01 поведінка браузера не визначена, якщо жоден з optionелементів не має selectedатрибута, а те, що браузери роблять на практиці, це те, що вони роблять перший параметр попередньо обраним.

Як вирішення, ви можете замінити select елемент набором input type=radioелементів (з тим самим nameатрибутом). Це створює керування такого ж типу, хоча і з різним зовнішнім виглядом та користувальницьким інтерфейсом. Якщо жоден з input type=radioелементів не має checkedатрибута, то жоден з них спочатку не вибирається в більшості сучасних браузерів.

— Юкка К. Корпела
джерело
0

Я використовую Laravel 5 Framework і відповідь @Gambi працював і для мене, але з деякими змінами для мого проекту.

У мене є параметри параметрів у таблиці бази даних, і я використовую їх із заявою foreach. Але перед заявою я додав параметр із запропонованими налаштуваннями @Gambit, і він спрацював.

Ось мій приклад:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

Я сподіваюся, що це допомагає і комусь. Продовжуй гарно працювати!

— LOG Oracle
джерело
0

Спробуйте це:

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

Перший варіант у спадному меню буде порожнім.

— Abhijit pai
джерело
0

Для того, щоб показати, будь ласка, виберіть значення у спадному меню та прихойте його після вибору певного значення. будь ласка, використовуйте наведений нижче код.

він також підтримує необхідну перевірку.

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>
Розгорніть фрагмент

— Батрі Натан
джерело
0

Якщо ви використовуєте Angular (2+), (або будь-який інший фреймворк), ви можете додати певну логіку. Логіка була б такою: відображати порожню опцію лише в тому випадку, якщо користувач ще не обрав жодної іншої. Тож після того, як користувач обрав опцію, порожня опція зникає.

Для кутових (9) це виглядатиме приблизно так:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>
— Майк де Клерк
джерело
-2

Спробуйте це:

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

Підтверджує у HTML5. Працює з requiredатрибутом у виділеному елементі. Можна повторно вибрати. Працює в Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.

— Трістан Бейлі
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.