Domyślny tekst, który nie będzie wyświetlany na liście rozwijanej

Mam, selectktóry początkowo pokazuje Wybierz język, dopóki użytkownik nie wybierze języka. Gdy użytkownik otworzy wybór, nie chcę, aby była wyświetlana opcja Wybierz język , ponieważ nie jest to rzeczywista opcja.

Jak mogę to osiągnąć?

Rozwiązanie Kyle'a działało idealnie dla mnie, więc przeprowadziłem badania, aby uniknąć wszelkich Js i CSS, ale po prostu trzymałem się HTML. Dodanie wartości selecteddo elementu, który ma być wyświetlany jako nagłówek, wymusza na nim wyświetlanie w pierwszej kolejności jako symbolu zastępczego. Coś jak:

<option selected disabled>Choose here</option>

Kompletne oznaczenie powinno wyglądać następująco:

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

Możesz spojrzeć na to skrzypce , a oto wynik:

Jeśli nie chcesz, aby rodzaj tekstu zastępczego pojawiał się w opcjach po kliknięciu przez użytkownika pola wyboru, po prostu dodaj hiddenatrybut w następujący sposób:

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

Sprawdź skrzypce tutaj i zrzut ekranu poniżej.

Oto rozwiązanie:

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

Właściwym i semantycznym sposobem jest użycie opcji etykiety zastępczej :

• Dodaj optionelement jako pierwsze dzieckoselect
• Ustaw na tovalue= ""option
• Ustaw tekst zastępczy jako treść tego option
• Dodaj requiredatrybut doselect

To zmusi użytkownikowi wybrać inną opcję, aby móc wysłać formularz, a przeglądarek powinna uczynićoption według potrzeb:

Jeśli element select zawiera opcję etykiety zastępczej, oczekuje się, że program użytkownika wyrenderuje tę opcję w sposób wskazujący, że jest to etykieta, a nie poprawna opcja kontrolki.

Jednak większość przeglądarek wyrenderuje to normalnie option. Będziemy więc musieli to naprawić ręcznie, dodając następujące elementy do option:

• selectedAtrybut, aby wybrany domyślnie
• disabledAtrybut, aby nie wybierane przez użytkownika
• display: none, aby ukryć go na liście wartości

select > .placeholder {
  display: none;
}

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

Ponieważ nie możesz używać symboli zastępczych przypisania do selecttagów, nie sądzę, aby można było zrobić dokładnie to, o co prosisz, za pomocą czystego HTML / CSS. Możesz jednak zrobić coś takiego:

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

W menu pojawi się opcja „Wybierz język”, ale po wybraniu innej opcji nie będzie można jej ponownie wybrać.

Mam nadzieję że to pomogło.

Spróbuj tego:

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

W CSS:

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

Mam rozwiązanie z zakresem wyświetlanym powyżej zaznaczenia, aż do zakończenia wyboru. Rozpiętość wyświetla domyślny komunikat, więc nie ma go na liście propozycji:

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

Zrobiłem jsfiddle na wersję demonstracyjną . Testowane z przeglądarką Firefox i IE8.

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

możesz oczywiście przenieść css do pliku css, jeśli chcesz, i umieścić skrypt, aby złapać escprzycisk, aby ponownie wybrać wyłączony. W przeciwieństwie do innych podobnych odpowiedzi, które umieściłem value="", jest tak, więc jeśli wyślesz wartości z listy wyboru za pomocą formularza, nie będzie ona zawierać „wybierz coś”. W asp.net mvc 5 wysłany jako json skompilowany z, var obj = { prop:$('#ddl').val(),...};a JSON.stringify(obj);wartość właściwości będzie równa 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');​​​​​​​