드롭 다운 목록에 빈 항목이없는 빈 HTML SELECT


110

subj를 어떻게 구현합니까?

내가 쓸 때 :

<form>
  <select>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

기본 선택 항목은 "aaaa"입니다.

내가 쓸 때 :

<form>
  <select>
     <option value=""></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

기본적으로 선택된 항목은 비어 있지만이 비어있는 항목은 드롭 다운에 표시됩니다.

드롭 다운 목록에 숨겨진 기본 빈 값으로 SELECT 태그를 구현하려면 어떻게해야합니까?


답변:


182

비활성화 및 / 또는 숨겨진 속성을 사용하십시오.

<option selected disabled hidden style='display: none' value=''></option>
  • selected 이 옵션을 기본 옵션으로 만듭니다.
  • disabled 이 옵션을 클릭 할 수 없게 만듭니다.
  • style='display: none'이 옵션은 이전 브라우저에 표시되지 않습니다. 참조 : 숨겨진 속성에 대한 문서를 사용할 수 있습니까?
  • hidden 드롭 다운 목록에이 옵션이 표시되지 않도록합니다.

3
실제로 IE 11은 "숨김"옵션을 표시합니다.
Edward Olamisan 2013-10-15

6
웹킷은 '숨김'속성을 지원하지 않는 것
에단 Reesor

2
에서 언급 한 바와 같이 할 수 있습니까 사용hidden특성을 효과적으로이다 display: none그래서 이전 버전의 브라우저를 지원하기 위해, :<option selected disabled hidden style='display: none' value=''></option>
네타

66

당신은 설정하여 수 selectedIndex-1사용 .prop: http://jsfiddle.net/R9auG/ .

이전의 jQuery 버전을 사용하십시오 .attr대신 .prop: http://jsfiddle.net/R9auG/71/ .


@IronicMuffin : 감사합니다. 방금 테스트했으며 실제로 모든 주류 브라우저에서 작동하는 것 같습니다.
pimvdb 2012 년

@zobidafly : 편집 해 주셔서 감사합니다. 조금 더 자세히 설명했습니다.
pimvdb

1
.attr새 jQuery 버전에서는 실패합니다. 똑똑해 지려고 노력하면 실패했습니다.
Carson Ip

33

단순히 사용

<option value="" selected disabled>Please select an option...</option>

스크립트없이 어디에서나 작동하며 동시에 사용자에게 지시 할 수 있습니다.


25
<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>

1
FF / 크롬 - 좋아, 오페라 / ie7-9 -하지 당신이 (또는 JS없이) 여기에 테스트 할 수 있습니다 확인 : jsfiddle.net/R9auG/145을 나는 @pimvdb에 의해 JS-접근 방식을 권장하므로
tibalt

11

다음은 일반 JavaScript를 사용하여이를 수행하는 간단한 방법입니다. 이것은 pimvdb가 게시 한 jQuery 스크립트에 해당하는 바닐라입니다. 여기에서 테스트 할 수 있습니다 .

<script type='text/javascript'>
  window.onload = function(){
    document.getElementById('id_here').selectedIndex = -1;
  }
</script>

.

<select id="id_here">
  <option>aaaa</option>
  <option>bbbb</option>
</select>

양식 및 JavaScript에서 "id_here"가 일치하는지 확인하십시오.


3

당신은 할 수 없습니다. 그들은 단순히 그렇게 작동하지 않습니다. 드롭 다운 메뉴에는 항상 옵션 중 하나가 선택되어 있어야합니다.

권장하지는 않지만 변경 이벤트를 감시 한 다음 JS를 사용하여 비어있는 경우 첫 번째 옵션을 삭제할 수 있습니다.


3
이 동작을 권장하지 않는 이유는 무엇입니까?
Josh Noe

사용자가 목록에서 무언가를 적극적으로 선택하기를 원하는 경우가 많이 있습니다. 나는 JS가 그것을하는 가장 최적의 방법이라고 생각하지 않지만 (유일한 방법 인 것처럼 보이지만) 실제로 방법 이 있어야 한다고 생각 합니다 .
qwerty

2

순전히 html @isherwood에는 훌륭한 솔루션이 있습니다. jQuery의 경우 선택 드롭 다운에 ID를 제공 한 다음 jQuery로 선택합니다.

<form>
  <select id="myDropDown">
    <option value="0">aaaa</option>
    <option value="1">bbbb</option>
  </select>
</form> 

그런 다음이 jQuery를 사용하여 페이지로드시 드롭 다운을 지 웁니다.

$(document).ready(function() {
    $('#myDropDown').val(''); 
});

또는 자체적으로 함수 안에 넣습니다.

$('#myDropDown').val(''); 

원하는 것을 수행하고 페이지를 다시로드하지 않고 드롭 다운을 비워야하는 경우 페이지에서 호출 될 수있는 함수에이를 쉽게 넣을 수 있습니다.


0

이 스 니펫을 시도해 볼 수 있습니다.

$("#your-id")[0].selectedIndex = -1

그것은 나를 위해 일했습니다.


1
더 명확한 설명을 제공하기 위해 답변과 함께 jsfiddle.net 을 제공하는 것이 가장 좋습니다 .
Anonymous

1
이것은 OP가 jQuery를 사용하고 있다고 가정합니다.
evanrmurphy 2014 년
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.