HTML 선택 요소에서 선택 옵션을 기본값으로 공백으로 설정합니다.
HTML의 드롭다운 메뉴에서 기본적으로 선택되지 않은 옵션을 사용해야 합니다. 그러나 다음을 사용할 수 없습니다.
<select>
<option></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>그러기 위해서는 첫 번째 옵션을 처리할 수 있는지 검증해야 하기 때문입니다.
선택 태그의 일부로 첫 번째 옵션을 포함하지 않고 이 목표를 달성할 수 있도록 도와줄 수 있는 사람이 있습니까?
아마 이게 도움이 될 거야
<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>
이를 위해 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);
오늘(2015-02-25)
이것은 유효한 HTML5 로, 공백(스페이스가 아님)을 서버에 송신합니다.
<option label=" "></option>
http://validator.w3.org/check에서 유효성을 확인.
Win7(IE11 IE10 IE9 FF35 Safari 5.1) Ubuntu14.10(Chrome40, FF35) OSX_Yosemite(Safari8, Chrome40) Android(Samsung-Galaxy-S5)에서 동작 확인.
다음 항목도 오늘 검증에 합격했지만 대부분의 브라우저에서 서버에 일종의 공백 문자(아마 바람직하지 않을 수 있음)를 전달하고 다른 브라우저에서는 공백 문자(Chrome40/Linux는 공백 문자)를 전달합니다.
<option> </option>
이전(2013-08-02)
필자의 노트에 따르면, 2013년에 위에 표시된 옵션 태그 안에 있는 구분되지 않는 공간 엔티티가 다음과 같은 오류를 발생시켰습니다.
오류: W3C Markup Validaton Service(공용):필수 애트리뷰트와 다중 애트리뷰트가 없는 선택 요소의 첫 번째 자식 옵션 요소에는 빈 값 애트리뷰트가 있거나 텍스트 내용이 없어야 합니다.
그 때, 통상의 공간은 유효한 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><td><b>Field Label:</b><br>
<select style='align:left; width:100%;' id='some_id' name='some_name'>
<option hidden selected>Select one...</option>
<option value='Value1'>OptLabel1</option>
<option value='Value2'>OptLabel2</option>
<option value='Value3'>OptLabel3</option></select>
</td>드롭다운 목록에서 숨길 옵션에 "숨김"을 넣기만 하면 됩니다.
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>이 방법은 다음과 같습니다.
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>한마디만 하자면:
일부 Safari 브라우저는 "숨김" 속성도 스타일 설정 "display:none"도 존중하지 않는 것 같습니다(MacOS 10.12.6의 Safari 12.1에서 테스트됨).명시적인 자리 표시자 텍스트가 없는 경우, 이러한 브라우저는 옵션 목록에서 빈 첫 줄을 표시합니다.따라서 이 "dummy" 엔트리에 대한 설명 텍스트를 항상 제공하는 것이 도움이 될 수 있습니다.
<option hidden disabled selected value>(select an option)</option>
"disabled" Atribute로 인해 액티브하게 선택되지 않습니다.
<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>
이 경우 사용자 지정 검증을 피할 수 있습니다.
나는 네가 무엇을 하려는지 이해한다.가장 성공적이고 최선의 방법은 다음과 같습니다.
<select name='department' required>
<option value="">None</option>
<option value="Teaching">Teaching department</option>
<option value="nonTeaching">Non-teaching department</option>
</select>
얼마 전에 같은 일을 겪었기 때문에 매우 흥미로웠습니다.그런데 인터넷에서 이 문제에 대한 해결책에 대한 예를 접하게 되었습니다.
자세한 것은, 이하에 나타내는 코드 조각을 참조해 주세요.
<select>
<option value data-isdefault="true">--Choose one Option--</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
그 결과, 제출은 불가능하지만 언제든지 선택할 수 있게 됩니다.사용자 인터페이스의 편리성과 사용자 익스피리언스의 향상.
그게 다에요 도움이 됐으면 좋겠네요건배!
HTML 루 html html html html html 。4.에서는, HTML 4.01 의 도 정의되어 있지 않은 , 되어 있지 않습니다.option에는 「」가 .selectedAtribute, 그리고 실제로 브라우저가 하는 일은 첫 번째 옵션을 미리 선택하는 것입니다.
문제를 해결하려면 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 를 대체할 수 .select의 input type=radio 「」(「」)를 )name속성)을 참조해 주세요.이로 인해 외관 및 사용자 인터페이스가 다르지만 동일한 종류의 제어가 생성됩니다.「」가 input type=radio에는 「」가 .checkedAtribute는 대부분의 최신 브라우저에서 처음에 선택되지 않았습니다.
저는 Larabel 5 프레임워크를 사용하고 있는데, @Gambi의 답변은 저에게도 효과가 있었지만, 제 프로젝트에서는 몇 가지 변경을 가했습니다.
데이터베이스 테이블에 옵션 값이 있으며 이를 foreach 문과 함께 사용합니다.단, 스테이트먼트 전에 @Gambit 권장 설정을 포함한 옵션을 추가해 두었습니다.
예를 들어 보겠습니다.
@isset($keys)
<select>
<option disabled selected value></option>
@foreach($keys as $key)
<option>{{$key->value)</option>
@endforeach
</select>
@endisset
이것도 누군가에게 도움이 됐으면 좋겠어요.계속 잘해주길!
이것을 시험해 보세요.
<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>
드롭다운의 첫 번째 옵션은 공백입니다.
표시하기 위해서는 드롭다운에서 값을 선택하고 값을 선택한 후 숨겨주세요.아래 코드를 사용해 주세요.
또, 필요한 검증도 서포트합니다.
<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>Angular(2+), (또는 다른 프레임워크)를 사용하는 경우 로직을 추가할 수 있습니다.논리적으로 사용자가 아직 다른 옵션을 선택하지 않은 경우에만 빈 옵션을 표시합니다.따라서 사용자가 옵션을 선택한 후에는 빈 옵션이 사라집니다.
각도(9)의 경우 다음과 같습니다.
<select>
<option *ngIf="(hasOptionSelected$ | async) === false"></option>
<option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>
사용하시는 분<select multiple>(상자, 드롭다운 없음), 이것은 나에게 효과가 있었다.
<select size=1 disabled multiple>
<option hidden selected></option>
<option>My Option</option>
</select>처음에 빈 옵션이 필요하지 않은 경우 다음 첫 번째 줄을 사용해 보십시오.
<option style="display:none"></option>
"..option hidden selected.." 를 사용합니다.디폴트 옵션으로서 "
라디오 버튼을 사용하여 #1을 디폴트로 설정하고 숨기는 것이 좋습니다.예를 들어, 예를 들어,name="init"및 avalue="null"뭐, 너한테 달렸어!
이렇게 하면 라디오 버튼목록에는 분명히 값이 표시되지만 기본값인 null을 논리적으로 사용할 수 있습니다.
이 아이디어는 쉽게 구현될 수 있기 때문에 더 자세히 설명할 필요는 없다고 생각합니다.display: none;또는visibility: hidden;
하지만 첫 번째는display: none;더 나은 옵션입니다.
응답에서는 아래와 같이 선택 태그로 더미 값(-1이라고 함)을 지정할 수 있습니다.또, 이 무효화 옵션에서도 같은 값을 사용할 수 있습니다.(WORKED FOR ME)
const nonEmpty = selected[identifierField] || false;
<select
onChange={(e) => {
onSelect(
options.find((option) => option[identifierField] === e.target.value)
);
}}
value={nonEmpty || -1}
>
<option disabled value={-1}>Select Option</option>
{options.map((option) => (
<option key={option[identifierField]} value={option[identifierField]}>
{option[displayField]}
</option>
))}
</select>
option style="display:none"
태블릿을 위한 부적절한 솔루션: iPad Pro / iOS 15 / Safari 드롭다운에 불필요한 행이 표시됩니다(실제 디바이스만 해당).에뮬레이터에서는 재현되지 않습니다.
이것을 시험해 보세요.
<select>
<option value="">
<option>Option 1
<option>Option 2
<option>Option 3
</select>
HTML5에서 검증됩니다.동작동 가능requiredAtribut을 클릭합니다.다시 선택할 수 있습니다.Google Chrome 45, Internet Explorer 11, Edge, Firefox 41에서 작동합니다.
언급URL : https://stackoverflow.com/questions/8605516/set-the-select-option-as-blank-as-default-in-html-select-element
'sourcetip' 카테고리의 다른 글
| SQL에서 시간 없이 날짜를 선택하는 방법 (0) | 2023.04.08 |
|---|---|
| CSS를 사용하여 HTML5 입력 자리 표시자 색상 변경 (0) | 2023.04.08 |
| PowerShell 스크립트에서 스크립트 코드를 재사용/ Import하려면 어떻게 해야 합니까? (0) | 2023.04.08 |
| TextView에서 HTML을 표시하는 방법 (0) | 2023.04.08 |
| PowerShell에서 $_는 무엇을 의미합니까? (0) | 2023.04.08 |