Pomyślałem, że dodanie "value"
zestawu atrybutów w <select>
poniższym elemencie spowoduje domyślny wybór <option>
zawierającego mój podany "value"
:
<select name="hall" id="hall" value="3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
Nie działało to jednak tak, jak się spodziewałem. Jak mogę ustawić, który <option>
element jest domyślnie wybrany?
html
html-select
Jichao
źródło
źródło
Odpowiedzi:
Ustaw
selected="selected"
opcję, która ma być domyślna.źródło
ng-model
przesłania domyślną wybraną wartość (nawet niezdefiniowaną, jeśli nie ustawiłeś powiązanego obiektu). Zajęło mi trochę czasu, aby domyślić się, dlatego taselected="selected"
opcja nie została wybrana.Jeśli chcesz mieć domyślny tekst jako rodzaj symbolu zastępczego / podpowiedzi, ale nie jest on uważany za prawidłową wartość (coś takiego jak „uzupełnij tutaj”, „wybierz swój naród” itd.), Możesz zrobić coś takiego:
źródło
hidden
atrybutu. Zobacz odpowiedź @ chong-lip-phang poniżej: stackoverflow.com/a/39358987/1192426<option value="" selected disabled hidden>Choose here</option>
Kompletny przykład:
źródło
selected="selected"
? Mam na myśli, co oszczędzasz? Czas? Rozmiar? Jest nieistotny i jeśli sprawia, że kod jest bardziej „zgodny”, dlaczego tego nie zrobić ?Natknąłem się na to pytanie, ale zaakceptowana i wysoko oceniona odpowiedź nie działała dla mnie. Okazuje się, że jeśli używasz React, to ustawienie
selected
nie działa.Zamiast tego musisz ustawić wartość w
<select>
tagu bezpośrednio, jak pokazano poniżej:Dowiedz się więcej o tym, dlaczego tutaj na stronie React .
źródło
value
atrybutu dla<select>
znacznika, tzn.<select value="3">
Nie jest ona poprawna w walidatorze W3C.$("select").each(function(){ $(this).find('option[value="'+$(this).attr("value")+'"]').prop('selected', true); });
Możesz to zrobić w następujący sposób:
Podaj słowo kluczowe „zaznaczone” w tagu opcji, który ma się domyślnie pojawiać na liście rozwijanej.
Lub możesz także podać atrybut tagowi opcji, tj
źródło
selected="false"
jest to niedozwolone, aselected=""
także powoduje, że jest zaznaczone. Jedynym sposobem, aby opcje nie zostały wybrane, jest usunięcie atrybutu. w3.org/html/wg/drafts/html/master/…jeśli chcesz użyć wartości z formularza i zachować go dynamicznie, wypróbuj to z php
źródło
Wolę to:
„Wybierz tutaj” znika po wybraniu opcji.
źródło
value=""
aby upewnić się, że otrzymasz pustą wartość.Ulepszenie odpowiedzi nobity . Możesz także poprawić wizualny widok listy rozwijanej, ukrywając element „Wybierz tutaj”.
źródło
Najlepszy sposób moim zdaniem:
Dlaczego nie wyłączone?
Gdy użyjesz atrybutu disabled razem z
<button type="reset">Reset</button>
wartością nie resetuje się do pierwotnego symbolu zastępczego. Zamiast tego wybierz pierwszą nie wyłączoną opcję przeglądarki, która może powodować błędy użytkownika.Domyślna pusta wartość
Każda forma produkcji ma sprawdzanie poprawności, więc pusta wartość nie powinna stanowić problemu. W ten sposób możemy mieć pusty, niewymagany wybór.
Atrybuty składni XHTML
selected="selected"
składnia jest jedynym sposobem na zgodność z XHTML i HTML 5. Jest to poprawna składnia XML i niektórzy edytorzy mogą być z tego zadowoleni. Jest bardziej kompatybilny wstecz. Nie mam silnego przeczucia, ale jeśli powyższe argumenty są Twoimi wymaganiami, powinieneś przestrzegać pełnej składni.źródło
Inny przykład; za pomocą JavaScript, aby ustawić wybraną opcję.
(Możesz użyć tego przykładu do zapętlenia tablicy wartości w rozwijanym komponencie)
<select id="yourDropDownElementId"><select/>
źródło
el.selected = "selected";
zgodne ze standardem w3?selected
to właściwość logiczna zdefiniowana przez w3c - w3.org/TR/html401/interact/forms.html `17.6.1 Wybrano wstępnie wybrane opcje [CI] - Po ustawieniu ten atrybut boolowski określa, że ta opcja jest wstępnie wybrane. Aby uzyskać więcej informacji na temat użytkowania, zobacz szkoły w3c - w3schools.com/jsref/prop_option_selected.aspWybrany atrybut jest atrybutem logiczną.
Gdy jest obecny, określa, że opcja powinna być wstępnie wybrana podczas ładowania strony.
Wstępnie wybrana opcja zostanie wyświetlona jako pierwsza na liście rozwijanej.
źródło
Jeśli reagujesz, możesz użyć
defaultValue
atrybutu zamiastvalue
tagu select.źródło
Jeśli używasz select z kątem 1, musisz użyć ng-init, w przeciwnym razie druga opcja nie zostanie wybrana, ponieważ model ng zastępuje wybraną wartość domyślną
źródło
Użyłem tej funkcji php do wygenerowania opcji i wstawienia jej do mojego HTML
A potem w kodzie strony używam go jak poniżej;
Jeśli $ endmin jest tworzony ze zmiennej _POST za każdym razem, gdy strona jest ładowana (i ten kod znajduje się w formularzu, który publikuje), poprzednio wybrana wartość jest wybierana domyślnie.
źródło
brakuje atrybutu wartości tagu, więc nie wyświetla się tak, jak chcesz. Domyślnie pierwsza opcja wyświetla się przy ładowaniu strony rozwijanej, jeśli atrybut tagu jest ustawiony na tag .... Rozwiązałem swój problem w ten sposób
źródło
Ten kod ustawia domyślną wartość elementu wyboru HTML w PHP.
źródło
Możesz użyć:
zamiast,
oba są równie poprawne.
źródło
Chciałbym po prostu ustawić wartość pierwszej opcji wyboru jako domyślną i po prostu ukryć tę wartość w menu rozwijanym za pomocą nowej funkcji „ukrytego” HTML5. Lubię to:
źródło
Sam go używam
źródło
Trzeba tylko umieścić atrybut „zaznaczony” na konkretnej opcji zamiast bezpośrednio wybrać element.
Oto fragment tego samego i wielu działających przykładów z różnymi wartościami.
źródło
Ustaw wybrane = „wybrane” gdzie wartość opcji to 3
zobacz poniższy przykład
źródło
Problem
<select>
polega na tym, że czasami jest on rozłączany ze stanem tego, co jest obecnie renderowane i jeśli coś się nie zmieni na liście opcji, żadna wartość zmiany nie jest zwracana. Może to stanowić problem przy próbie wybrania pierwszej opcji z listy. Poniższy kod może uzyskać pierwszą opcję po raz pierwszy wybrany, aleonchange="changeFontSize(this)"
sam nie zrobiłby. Istnieją metody opisane powyżej przy użyciu opcji fikcyjnej, aby zmusić użytkownika do dokonania zmiany wartości w celu pobrania rzeczywistej pierwszej wartości, na przykład rozpoczęcia listy z pustą wartością. Uwaga: onclick wywołałby funkcję dwukrotnie, poniższy kod nie, ale rozwiązuje problem za pierwszym razem.źródło
Używam Angulara i ustawiam opcję domyślną przez
Szablon HTML
Scenariusz:
źródło
Tak to zrobiłem ...
źródło
Możesz spróbować w ten sposób
źródło
Fragment HTML:
Natywny fragment kodu JavaScript:
źródło
źródło