[html] 드롭 다운 목록에 표시되지 않는 기본 텍스트

나는이 select처음에 표시되는 언어 선택 사용자가 선택하는 언어까지를. 사용자가 선택 항목을 열 때 실제 옵션이 아니기 때문에 언어 선택 옵션 을 표시하고 싶지 않습니다.

이것을 어떻게 할 수 있습니까?

답변

Kyle의 솔루션 은 나에게 완벽하게 작동했기 때문에 Js와 CSS를 피하기 위해 연구를했지만 HTML을 고수했습니다. selected헤더로 표시하려는 항목에 의 값을 추가 하면 처음에 자리 표시 자로 표시됩니다. 다음과 같은 것 :

<option selected disabled>Choose here</option>

완전한 마크 업은 다음 줄을 따라야합니다.

<select>
    <option selected disabled>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

이 바이올린을 볼 수 있으며 결과는 다음과 같습니다.

당신이 경우 없는 선택 상자에 사용자가 클릭 한 번 옵션에 나열하여 표시 자리 표시 자 텍스트의 정렬을 원하는 단지 추가 hidden과 같이 속성을 :

<select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

여기 에서 바이올린 과 아래 스크린 샷을 확인하십시오 .

답변

해결책은 다음과 같습니다.

<select>
    <option style="display:none;" selected>Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

답변

적절하고 의미론적인 방법은 자리 표시 자 레이블 옵션을 사용하는 것입니다 .

option요소를 첫 번째 자식으로 추가select
설정 이에value= ""option
자리 표시 자 텍스트를 해당 내용으로 설정 option
추가 required받는 사람 속성을select

이 양식을 제출 할 수 있도록 다른 옵션을 선택하도록 강제하고, 브라우저한다 렌더링option 로 원하는 :

선택 요소에 자리 표시 자 레이블 옵션이 포함 된 경우 사용자 에이전트는 컨트롤의 유효한 옵션이 아니라 레이블임을 전달하는 방식으로 해당 옵션을 렌더링해야합니다.

그러나 대부분의 브라우저는 일반 option. 따라서에 다음을 추가하여 수동으로 수정해야합니다 option.

selected속성은, 그것을 만들기 위해 선택 기본적으로
disabled속성은 사용자가이 비 선택 만들려면
display: none, 값 목록에서 숨기려면

select > .placeholder {
  display: none;
}

<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

스 니펫 확장

답변

select태그에 할당 자리 표시자를 사용할 수 없기 때문에 순수한 HTML / CSS로 원하는 것을 정확히 수행 할 수있는 방법이 없다고 생각합니다. 그러나 다음과 같이 할 수 있습니다.

<select>
  <option disabled="disabled">Select language</option>
  <option>Option 1</option>
</select>

“언어 선택”이 드롭 다운에 표시되지만 다른 옵션을 선택하면 다시 선택할 수 없습니다.

도움이 되었기를 바랍니다.

답변

이 시도:

<div class="selectSelection">
    <select>
        <option>Do not display</option>
        <option>1</option>
        <option>1</option>
    </select>
</div>

CSS에서 :

.selectSelection option:first-child{
    display:none;
}

답변

선택이 완료 될 때까지 선택 위에 범위가 표시된 솔루션이 있습니다. 범위는 기본 메시지를 표시하므로 명제 목록에 없습니다.

HTML :

<span id="default_message_overlay">Default message</span>
<select id="my_select">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

CSS :

#default_message_overlay {
    position: absolute;
    display: block;
    width: 120px;
    color: grey;
}
select {
    width: 150px;
}

자바 스크립트 (JQuery 포함) :

$(document).ready(function() {
    // No selection at start
    $('#my_select').prop("selectedIndex", -1);

    // Set the position of the overlay
    var offset = $('#my_select').offset();
    offset.top += 3;
    offset.left += 3;
    $('#default_message_overlay').offset(offset);

    // Remove the overlay when selection changes
    $('#my_select').change(function() {
        if ($(this).prop("selectedIndex") != -1) {
            $('#default_message_overlay').hide();
        }
    });
});

데모 용 jsfiddle을 만들었습니다 . Firefox 및 IE8에서 테스트되었습니다.

답변

<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>

물론 원한다면 css를 css 파일로 옮기고 esc, 비활성화 된 것을 다시 선택하는 버튼을 잡는 스크립트를 넣을 수 있습니다. 내가 넣은 다른 유사한 답변과는 달리 value=""선택 목록의 값을 양식과 함께 보내면 “선택 항목”이 포함되지 않습니다. asp.net MVC에서 5 컴파일 JSON으로 전송 var obj = { prop:$('#ddl').val(),...};및 JSON.stringify(obj);소품의 값은 널이어야한다.