Texto padrão que não será mostrado na lista suspensa

Eu tenho um selectque mostra inicialmente Selecionar idioma até que o usuário selecione um idioma. Quando o usuário abre a seleção, não quero mostrar uma opção Selecionar idioma , porque não é uma opção real.

Como posso conseguir isso?

A solução de Kyle funcionou perfeitamente bem para mim, então fiz minha pesquisa para evitar Js e CSS, mas apenas permanecendo com HTML. Adicionar um valor de selectedao item que queremos que apareça como cabeçalho força-o a ser mostrado em primeiro lugar como um espaço reservado. Algo como:

<option selected disabled>Choose here</option>

A marcação completa deve seguir estas linhas:

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

Você pode dar uma olhada neste violino e aqui está o resultado:

Se você não quiser que o tipo de texto de espaço reservado apareça listado nas opções assim que um usuário clicar na caixa de seleção, basta adicionar o hiddenatributo desta forma:

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

Verifique o violino aqui e a imagem abaixo.

Aqui está a solução:

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

A maneira adequada e semântica é usar uma opção de marcador de posição :

• Adicione um optionelemento como o primeiro filho doselect
• Conjunto value= "" para issooption
• Defina o texto do espaço reservado como o conteúdo daquele option
• Adicione o requiredatributo aoselect

Isso forçará o usuário a selecionar outra opção para poder enviar o formulário, e os navegadores devem processar o optionconforme desejado:

Se um elemento select contiver uma opção de rótulo de espaço reservado, espera-se que o agente do usuário renderize essa opção de uma maneira que transmita que é um rótulo, em vez de uma opção válida do controle.

No entanto, a maioria dos navegadores o processará normalmente option. Portanto, teremos que consertá-lo manualmente, adicionando o seguinte ao option:

• O selectedatributo, para torná-lo selecionado por padrão
• O disabledatributo, para torná-lo não selecionável pelo usuário
• display: none, para ocultá-lo da lista de valores

select > .placeholder {
  display: none;
}

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

Como você não pode usar marcadores de posição atribuídos para selecttags, não acredito que haja alguma maneira de fazer exatamente o que você está pedindo com HTML / CSS puro. Você pode, no entanto, fazer algo assim:

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

"Selecionar idioma" aparecerá no menu suspenso, mas uma vez que outra opção for selecionada, não será possível selecioná-la novamente.

Espero que ajude.

Experimente isto:

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

No CSS:

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

Eu tenho uma solução com um intervalo exibido acima do select até que uma seleção seja feita. O intervalo exibe a mensagem padrão e, portanto, não está na lista de proposições:

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

Javascript (com 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();
        }
    });
});

Eu fiz um jsfiddle para demonstração . Testado com Firefox e IE8.

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

você pode, é claro, mover o css para um arquivo css se quiser e colocar um script para capturar o escbotão para selecionar o desativado novamente. Ao contrário das outras respostas semelhantes que coloquei value="", se você enviar o (s) valor (es) da sua lista de seleção com um formulário, ela não conterá "escolheu algo". Em asp.net mvc 5 enviado como json compilado com var obj = { prop:$('#ddl').val(),...};e JSON.stringify(obj);o valor de prop será nulo.

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