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

나는이 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);소품의 값은 널이어야한다.

Op1 :

$("#MySelectid option").each(function () {
        if ($(this).html() == "text to find") {
            $(this).attr("selected", "selected");
            return;
        }
});

Op2 :

$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; })​​​​​​​​.attr('selected','selected');​​​​​​​