html - 프로토콜 - 기본 선택 옵션을 비워 둠



(8)

오늘 (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>

미래

spec이 공백 옵션을 명시 적으로 허용하도록 업데이트되면 내 마음이 기쁘게 될 것입니다. 가장 간단한 구문을 사용하는 것이 바람직합니다. 다음 중 하나가 훌륭합니다.

<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>

https://ffff65535.com

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

나는 이것을 사용할 수 없다.

<select>
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

왜냐하면 첫 번째 옵션을 처리하기 위해 유효성 검사를 수행해야하기 때문입니다. 누군가가 실제로 선택 태그의 일부로 첫 번째 옵션을 포함하지 않고이 목표를 달성하는 데 도움이 될 수 있습니까?


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>


jQuery 사용 :

//With jQuery 1.7.2
$("#myDropdown").attr("selectedIndex", -1);

jQuery v1.7.2 (2012 년 4 월 18 일 최신 버전)를 시험 사용해 보았지만이 버전에서는 'prop'가 작동하지 않습니다.


당신은 이것을 달성하기 위해 자바 스크립트를 사용할 수 있습니다. 다음 코드를 시도해보십시오.

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);

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

<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

<option style="display:none">

그래서 그것은 목록에 더 이상 나타나지 않을 것입니다.


이 시도:

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

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


저는 Laravel 5 프레임 워크를 사용하고 있습니다. @Gambi의 답변도 저에게 도움이되었지만 프로젝트에 약간의 변화가있었습니다.

데이터베이스 테이블에 옵션 값이 있고 foreach 문을 사용합니다. 그러나 성명 앞에 @Gambit 옵션을 추가하여 설정을 적용했습니다.

여기 내 예 :

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

나는 이것이 도움이되기를 바랍니다. 좋은 일을 계속하십시오!


<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>

드롭 다운 목록에서 숨기고 싶은 옵션에 "숨김"을 넣으십시오.





html