공백으로 기본 선택 옵션

458

HTML의 드롭 다운 메뉴에서 기본적으로 옵션을 선택하지 않아도되는 매우 이상한 요구 사항이 있습니다. 하나,

나는 이것을 사용할 수 없습니다

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
스 니펫 확장

이를 위해 첫 번째 옵션을 처리하기 위해 유효성 검사를 수행해야하기 때문입니다. select 태그의 일부로 첫 번째 옵션을 실제로 포함시키지 않고 누구나이 목표를 달성하는 데 도움을 줄 수 있습니까?

html 
— 판 카이 파라 샤르
소스
2
내가 아는 한 이것은 빈 줄을 얻는 유일한 방법입니다. 유효성 검사를 수행해야한다는 것은 무엇을 의미합니까? value = ""인지 확인하도록 설정 한 다음 false를 반환하십시오.
— Robert
1
드롭 다운 대신 라디오 버튼을 사용하는 것이 좋습니다.
— Blazemonger
9
제 생각에는 이상한 요구 사항은 아닙니다. 나는 같은 배에있다. '옵션 없음'기본값도 필요합니다. 양식을 제출하지 않아도되는 몇 가지 드롭 다운이 있습니다. 이러한 방식으로 비활성화하면 사용자가 적절하지 않은 항목을 선택하지 않아도됩니다. 좋은 질문! +1
— Scott
SELECT에 REQUIRED 속성이있는 경우 자리 표시 자 레이블 옵션을 갖는 것이 이상한 요구 사항은 아닙니다. HTML5 dev.w3.org/html5/spec-preview/…
— Testo Testini
@Blazemonger 라디오 버튼은 3 개 또는 4 개 이상인 경우 끔찍한 아이디어입니다. 15 개 이상의 옵션 또는 50 개 이상의 드롭 다운 목록을 상상해보십시오. 그것들은 많은 경우에 그들 자신의 디자인 문제를 가지고 있지만 문제는 여전히 라디오 버튼이 전혀 확장되지 않는다는 것을 의미 합니다 .
— TylerH

답변:

1014

아마 이것이 도움이 될 것입니다

<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이 있습니다.
— Uwe Keim
26
@Rafael_Mori가 지적한 @azerafati는 "hidden"속성을 사용하여 동일하게 보관할 수 있으므로 CSS가 필요하지 않습니다. 그냥 순수한 HTML5;)<option hidden disabled selected value> -- select an option -- </option>
— BrainOverflow
다시 선택하려면 어떻게해야합니까? 나는 단지 아무것도 보내지 않기를 원합니다. 가능합니까?
— Michael Rogers
1
옵션 요소에 숨겨진 속성을 추가하면 나에게 마술이되었습니다! 이 쉬운 일을 기대하지 않았다. 감사
— S. Domeng
숨겨진 속성과 표시 스타일은 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에서 부분적으로 작동합니다. 옵션 목록이 보이지 않으면 드롭 다운에 선택 항목이 표시되지 않지만 옵션 목록이 표시 될 때 선택된 첫 번째 옵션이 표시됩니다. Safari 7은 의도 한대로 동작합니다.
— flochtililoch
흥미로운 점은 HTML 양식 유효성 검사와 함께 작동한다는 것입니다. 요소 에서 required속성 을 사용하고 select옵션을 선택하지 않고 제출하면 양식 유효성 검증이 실패하고 사용자에게 알리면 선택해야합니다. 따라서 저는이 방법이 정말 마음에 듭니다. (Chrome에서 최소한 테스트)
— Andreas Linnert
작동하지 않습니다 (적어도이 글을 쓰는 시점에서 현재 브라우저에서-불필요하게 자바 스크립트에 의존합니다)
— silentmouth
1
2019 년 현재, Safari IOS 10
— 만이이
36

오늘 (2015-02-25)

이것은 유효한 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>

이전 (2013-08-02)

필자의 메모에 따르면, 위에 표시된 옵션 태그 내부의 공백이 아닌 엔티티는 2013 년에 다음과 같은 오류가 발생했습니다.

오류 : W3C 마크 업 유효성 검사 서비스 (공개) : 필수 특성이 있고 여러 특성이없고 크기가 1 인 select 요소의 첫 번째 하위 옵션 요소는 값이 비어 있거나 텍스트 내용이 없어야합니다.

당시 일반 공간은 유효한 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>
— 글렌 피터슨
소스
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>
스 니펫 확장

— 로한 parab
소스
이 요구 사항을 달성하는 가장 현대적인 (html5) 방법입니다. type = submit 버튼이 필요합니다. onclick 제출 핸들러가있는 type = button은 사용자가 자동으로 선택하도록 요구하지 않습니다.
— Arjan
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 브라우저는 "hidden"속성이나 스타일 설정 "display : none"(MacOS 10.12.6에서 Safari 12.1으로 테스트)을 고려하지 않는 것 같습니다. 명시 적 자리 표시 자 텍스트가 없으면 이러한 브라우저는 옵션 목록에 첫 번째 빈 줄만 표시합니다. 따라서이 "더미"항목에 대한 설명 텍스트를 항상 제공하는 것이 유용 할 수 있습니다.

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

"disabled"속성으로 인해 어쨌든 적극적으로 선택되지 않습니다.

— 안드레아스 로제 크
소스
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>

이를 통해 언제든 제출할 수 없지만 선택 가능합니다. 사용자 인터페이스의 편의성이 향상되고 사용자 경험이 향상되었습니다.

그게 다야, 나는 그것이 도움이되기를 바랍니다. 건배!

— 파리스
소스
제출할 수는 없지만 드롭 다운에 대한 사용자의 관심을 끄는 것은 불필요한 것처럼 보이지만 제안을 좋아합니다
— Iofacture
@lofacture : 입력 주셔서 감사합니다. 실제로, 내가 작성한 코드는 내가 원하는 코드 였지만 네가 말했듯이 사용자 / 소유자의 요구에 따라 다릅니다.
— farisfath25
0

HTML 솔루션이 없습니다. HTML 4.01 사양에 따르면, 속성을 option가진 요소가 없는 경우 브라우저 동작은 정의되지 않으며 selected실제로 브라우저는 첫 번째 옵션을 미리 선택해야합니다.

이 문제를 해결하려면 select요소를 input type=radio동일한 name속성을 가진 요소 집합으로 바꿀 수 있습니다. 이것은 모양과 사용자 인터페이스가 다르지만 동일한 종류의 컨트롤을 만듭니다. 속성 이있는 input type=radio요소가 없으면 checked대부분의 최신 브라우저에서 해당 요소 가 처음에 선택되지 않습니다.

— Jukka K. Korpela
소스
0

나는 Laravel 5 프레임 워크를 사용하고 있으며 @Gambi의 대답은 저에게도 효과가 있었지만 프로젝트의 일부 변경 사항이 있습니다.

데이터베이스 테이블에 옵션 값이 있으며 foreach 문과 함께 사용합니다. 그러나 진술 전에 @Gambit 제안 설정 옵션을 추가했으며 효과가있었습니다.

여기 내 예 :

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

이것이 누군가에게 도움이되기를 바랍니다. 좋은 일을 계속하십시오!

— 로그 오라클
소스
0

이 시도:

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

드롭 다운의 첫 번째 옵션은 비어 있습니다.

— 아비 짓 파이
소스
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+) 또는 다른 프레임 워크를 사용하는 경우 몇 가지 논리를 추가 할 수 있습니다. 사용자가 아직 다른 것을 선택하지 않은 경우에만 빈 옵션을 표시합니다. 따라서 사용자가 옵션을 선택하면 빈 옵션이 사라집니다.

Angular (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에서 유효합니다. requiredselect 요소의 attribute 와 함께 작동 합니다. 다시 선택할 수 있습니다. Chrome 45, Internet Explorer 11, Edge, Firefox 41에서 작동합니다.

— 트리스탄 베일리
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.