Testo predefinito che non verrà mostrato nell'elenco a discesa

Ho un selectche inizialmente mostra Seleziona lingua fino a quando l'utente seleziona una lingua. Quando l'utente apre la selezione, non voglio che mostri un'opzione Seleziona lingua , perché non è un'opzione effettiva.

Come posso raggiungere questo obiettivo?

La soluzione di Kyle ha funzionato perfettamente per me, quindi ho fatto le mie ricerche per evitare J e CSS, ma attenendomi semplicemente all'HTML. L'aggiunta di un valore di selectedall'elemento che vogliamo che appaia come intestazione ne forza la visualizzazione in primo luogo come segnaposto. Qualcosa di simile a:

<option selected disabled>Choose here</option>

Il markup completo dovrebbe essere lungo queste linee:

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

Puoi dare un'occhiata a questo violino ed ecco il risultato:

Se non vuoi che il tipo di testo segnaposto appaia elencato nelle opzioni una volta che un utente fa clic sulla casella di selezione, aggiungi l' hiddenattributo in questo modo:

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

Controlla il violino qui e lo screenshot qui sotto.

Ecco la soluzione:

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

Il modo corretto e semantico consiste nell'usare un'opzione etichetta segnaposto :

• Aggiungi un optionelemento come primo figlio diselect
• Impostato su quellovalue= ""option
• Imposta il testo segnaposto come contenuto di quello option
• Aggiungi l' requiredattributo al fileselect

Questo costringerà l'utente a selezionare un'altra opzione in modo da essere in grado di inviare il modulo, e browser dovrebbe rendere il optioncome desiderato:

Se un elemento select contiene un'opzione etichetta segnaposto, ci si aspetta che il programma utente riproduca quell'opzione in un modo che dica che si tratta di un'etichetta, piuttosto che un'opzione valida del controllo.

Tuttavia, la maggior parte dei browser lo visualizzerà normalmente option. Quindi dovremo risolverlo manualmente, aggiungendo quanto segue a option:

• L' selectedattributo, per renderlo selezionato di default
• L' disabledattributo, per renderlo non selezionabile dall'utente
• display: none, per nasconderlo dall'elenco dei valori

select > .placeholder {
  display: none;
}

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

Poiché non è possibile utilizzare segnaposto di assegnazione per i selecttag, non credo che ci sia un modo per fare esattamente ciò che si richiede con HTML / CSS puro. Puoi, tuttavia, fare qualcosa del genere:

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

"Seleziona lingua" apparirà nel menu a tendina, ma una volta selezionata un'altra opzione non sarà possibile riselezionarla.

Spero che aiuti.

Prova questo:

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

Nel CSS:

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

Ho una soluzione con un intervallo visualizzato sopra la selezione fino al termine di una selezione. Lo span mostra il messaggio predefinito, quindi non è nell'elenco delle proposizioni:

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

Ho creato un jsfiddle per la demo . Testato con Firefox e IE8.

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

puoi ovviamente spostare il css in un file css se lo desideri e inserire uno script per catturare il escpulsante per selezionare nuovamente i disabilitati. A differenza delle altre risposte simili che ho inserito value="", è così se invii i valori della tua lista di selezione con un modulo, non conterrà "ha scelto qualcosa". In asp.net mvc 5 inviato come json compilato con var obj = { prop:$('#ddl').val(),...};e JSON.stringify(obj);il valore di prop sarà null.

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