sourcetip

HTML 선택 요소에서 선택 옵션을 기본값으로 공백으로 설정합니다.

fileupload 2023. 4. 8. 09:09
반응형

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>&#160;</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="">&nbsp;
    <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

'sourcetip'의 다른글

  • 현재글HTML 선택 요소에서 선택 옵션을 기본값으로 공백으로 설정합니다.

관련글

댓글

티스토리툴바