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


108

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ąć?

Odpowiedzi:


214

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:

wprowadź opis obrazu tutaj

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.

wprowadź opis obrazu tutaj


To świetna odpowiedź, ale kiedy używasz Angular JS, to nie działa, ponieważ Angular automatycznie dodaje pustą opcję i ustawia ją jako domyślną
Dennis Wanyonyi

W każdym razie, dla odniesienia, oto jak zrobiłbyś w Angular, po prostu połącz powyższe podejście ze specyfiką Angular wyjaśnioną tutaj metaltoad.com/blog/…
Nobita

Zauważ, że atrybut , użyty w odpowiedzi powyżej, jest atrybutem, który można ustawić na dowolnym elemencie HTML, i jest zwykle (ale nie koniecznie) realizowane za równoważne ustawieniu z CSS. hiddendisplay: none
Mark Amery,

2
Należy również zauważyć, że ustawienie hiddenna zasadzie optionw sposób selectnie działa w Safari, po obu iOS lub Mac. Ta odpowiedź oferuje zatem tylko częściową obsługę przeglądarki.
Mark Amery,

1
To jest piękne!
Fibo Kowalsky

59

Oto rozwiązanie:

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

5
Zauważ, że selected="true"jest to nieprawidłowe. Zamiast tego użyj selected="selected"w (X) HTML lub po prostu selectedw HTML. Wygląda na to, że pomyliłeś selectedatrybut z selectedwłaściwością, który jest zmieniany w ten sposób: myOption.selected = true;lubmyOption.selected = false;
Oriol

2
„display: none” jest ignorowane przez przeglądarki korzystające z opcji wyboru natywnych dla urządzenia, takich jak Android i iOS. Musisz usunąć opcję z DOM w select.focus i zwrócić ją i wybrać w select.blur, aby działała.
Radek Pech

-1; Podobnie jak odpowiedź Nobita w użyciuhidden (który jest „typowo realizowane w CSS” za pomocą display: nonetak), wykorzystując display: nonena zasadzie optionnie działa w Safari; opcja nadal się pojawia.
Mark Amery,

50

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:

select > .placeholder {
  display: none;
}
<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>


Należy zauważyć, że nawet to (co jest najdokładniejszą próbą rozwiązania tego problemu ze wszystkich odpowiedzi tutaj) nie działa w Safari, ani na iOS, ani na Macu. Opcja będzie nadal działać po otwarciu zaznaczenia.
Mark Amery,

@MarkAmery Sugeruję, abyś zrobił to, co zaproponowano w odpowiedzi @Nobita i po prostu dodaj hiddenatrybut do zastępczego tagu opcji zamiast, display: nonejak się wydaje, większość przeglądarek mobilnych ignoruje display: noneatrybut CSS i moim zdaniem jest jeszcze bardziej poprawny semantycznie.
Gaboik1

@ Gaboik1 W komentarzach do tej odpowiedzi zauważyłem, że hiddenjest ona generalnie implementowana jako „ display: nonepod maską” (a specyfikacja wyraźnie sugeruje, że jest to „typowa” implementacja). W związku z tym zdziwiłbym się, gdyby jakieś przeglądarki - mobilne lub inne - hiddendziałały, ale display: nonenie działały . Czy możesz podać jakiś przykład?
Mark Amery

21

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.


2
Okazało się, że najlepsze jest połączenie wyłączone i wybrane z style = "display: none;". wyłączone jest przydatne, gdy chcesz przeprowadzić walidację - zapewnia, że ​​domyślnie nie ma włączonej opcji.
Illarion Kovalchuk

-1, ponieważ inne odpowiedzi tutaj (zwłaszcza Nobtia i Oriol) dostarczają zarówno dużo bardziej szczegółowych wyjaśnień, jak i znacznie bardziej kompletnych rozwiązań.
Mark Amery,

7

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

Ta odpowiedź nie zawiera niczego, czego inne odpowiedzi również nie zawierają bardziej szczegółowo, a ponadto ma złe formatowanie; -1.
Mark Amery,

5

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.


Chrome na OSX zawsze pokazuje pierwszą wybraną opcję, ale wydaje się, że jest ona specyficzna dla OSX, ponieważ wszystkie przedstawione tutaj rozwiązania prowadzą do wybrania pierwszej widocznej opcji.
Gamadril,

zamiast spantam używać legendi byłoby idealnie lublabel
karlcow

To ciekawe podejście i jedyny możliwy sposób, w jaki widzę, aby to zachowanie działało w Safari, ale tutaj jest źle zaimplementowane; potrzebujesz przynajmniej pointer-events: noneswojego zakresu, aby umożliwić przejście kliknięć w celu wybrania.
Mark Amery,

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


0

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');​​​​​​​
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.