Jak ustawić wartość domyślną dla elementu HTML <select>?

1456

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?

Jichao
źródło
Wow, to pytanie jest bardzo pomocne i dosłownie stało się wirusowe haha
finnmglas

Odpowiedzi:

2150

Ustaw selected="selected"opcję, która ma być domyślna.

<option selected="selected">
3
</option>
Borealid
źródło
19
<wartość opcji = „3” wybrano = „wybrano”> 3 </option> Wartość zostanie przekazana jako ciąg znaków, gdy zostanie wybrana opcja 3.
Sree Rama
5
Kontynuuj używanie atrybutu id dla <Wybierz> i nie jest dobrze używać atrybutu wartości dla elementu <select> HTML.
Sree Rama
214
Część = „wybrana” nie jest konieczna. Po prostu <wybrana opcja> zrobi, jak wspomniano w innych odpowiedziach.
MindJuice
56
@MindJuice To, co napisałem, jest poprawnym poliglotem HTML / XML. Użycie <wybrana opcja> jest odpowiednie dla przeglądarki, ale może spowodować odrzucenie dokumentu przez inne parsery. Przydaje mi się możliwość używania XPath / XSLT od czasu do czasu w dokumentach internetowych.
Borealid
70
Jeśli używasz Angulara, zwróć uwagę, że ng-modelprzesł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 ta selected="selected"opcja nie została wybrana.
metakermit
624

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:

<select>
  <option value="" 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>

Nobita
źródło
60
Myślę, że tego właśnie szuka większość ludzi. Dobra odpowiedź.
chrisallick,
1
To był zewnętrzny jsfiddle, w którym css był potrzebny, aby nie pojawiał się wzdłuż krawędzi ekranu. Po kilku miesiącach został on edytowany we wbudowanym fragmencie kodu, a facet, który dokonał edycji, po prostu zatrzymał go w tym przykładzie. Możesz go edytować i usunąć z fragmentu, jeśli naprawdę Ci to przeszkadza.
Nobita
Jeszcze lepszym rozwiązaniem jest użycie hiddenatrybutu. Zobacz odpowiedź @ chong-lip-phang poniżej: stackoverflow.com/a/39358987/1192426
Ivan Akulov
<option value="" selected disabled hidden>Choose here</option>
1
Świetna odpowiedź!
Japonki Sophey
234

Kompletny przykład:

<select name="hall" id="hall"> 
  <option> 
    1 
  </option> 
  <option> 
    2 
  </option> 
  <option selected> 
    3 
  </option> 
  <option> 
    4 
  </option> 
  <option> 
    5 
  </option> 
</select> 

RedFilter
źródło
11
To prostsze niż użycie opcji selected = „selected”.
Rodrigo
57
selected = „selected” powinno działać dla wszystkich typów dokumentów. XHTML nie lubi atrybutów bez wartości.
ps2goat
14
@Rodrigo Czy naprawdę tak trudno jest pisać 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ć ?
xDaizu,
15
@ DanielParejoMuñoz, ok, to nieistotne. Ale jeśli moim typem dokumentu jest html, a nie xhtml, po co marnować jakikolwiek bajt?
Rodrigo
5
selected = „selected” wygląda jak błąd. Za kilka miesięcy prawdopodobnie zmieniłbym to na selected = "3" myśląc, że to oznacza, że ​​wybrano pozycję 3. (i włamuje się na moją stronę)
Paul McCarthy
92

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 selectednie działa.

Zamiast tego musisz ustawić wartość w <select>tagu bezpośrednio, jak pokazano poniżej:

<select value="B">
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

Dowiedz się więcej o tym, dlaczego tutaj na stronie React .

MindJuice
źródło
2
Możesz ustawić wstępnie wybraną opcję na liście rozwijanej, używając valueatrybutu dla <select>znacznika, tzn. <select value="3">Nie jest ona poprawna w walidatorze W3C.
Apostoł
4
Zgadza się, ale to nie jest HTML, to JSX, więc nie musi przestrzegać reguł W3C. HTML wygenerowany przez React na końcu jest jednak poprawny.
MindJuice,
W idealnym świecie był to komentarz do pytania, ponieważ nie jest to prawidłowa odpowiedź. Ale myślę, że ma wystarczającą wartość, aby się trzymać.
Justus Romijn
2
Potrzebowałem podobnego rozwiązania do powyższej sugestii, ale z JQuery zamiast React. W przypadku, gdy pomoże to w przyszłości:$("select").each(function(){ $(this).find('option[value="'+$(this).attr("value")+'"]').prop('selected', true); });
CDK
Ta odpowiedź jest nieprawidłowa, podstawowe pytanie dotyczy HTML not React (JSX).
Aaron C
72

Możesz to zrobić w następujący sposób:

<select name="hall" id="hall">
    <option> 1 </option>
    <option> 2 </option>
    <option selected> 3 </option>
    <option> 4 </option>
    <option> 5 </option>
</select> 

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

<option selected="selected">3</option>
szkodliwy
źródło
13
Dla jasności standardem w3 jest <opcja wybrana = "wybrana"> 3 </option>
htmldrum
40
@JRM Myślę, że masz na myśli to, że jeśli twój dokument jest zgodny z XHTML, to atrybut musi mieć wartość. W HTML nie ma potrzeby używania słowa „selected = selected”. Przykłady na w3.org/wiki/HTML/Elements/select , developer.mozilla.org/en-US/docs/HTML/Element/select nie określają wartości. Ważne jest, aby pamiętać, że selected="false"jest to niedozwolone, a selected=""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/…
Juan Mendes
3
Nigdy nie rozumiem, w jaki sposób pytania takie jak ten są zawsze oceniane. Są DOKŁADNIE jak poprawna odpowiedź. 2 lata później lol
Phil
51

jeśli chcesz użyć wartości z formularza i zachować go dynamicznie, wypróbuj to z php

<form action="../<SamePage>/" method="post">


<?php
    $selected = $_POST['select'];
?>

<select name="select" size="1">

  <option <?php if($selected == '1'){echo("selected");}?>>1</option>
  <option <?php if($selected == '2'){echo("selected");}?>>2</option>

</select>
</form>
Florian
źródło
40

Wolę to:

<select>
   <option selected 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>

„Wybierz tutaj” znika po wybraniu opcji.

Chong Lip Phang
źródło
1
Próbowałem tego, ale „Wybierz tutaj” nie jest wyświetlany. Pierwsza opcja jest pusta
Bogdan Mates
Z jakiej przeglądarki korzystasz?
Chong Lip Phang
Używam przeglądarki Google Chrome w wersji 52.0.2743.116 m
Bogdan Mates
2
Używam również tej przeglądarki i nie mam żadnych problemów.
Chong Lip Phang,
2
Rozważ dodanie, value=""aby upewnić się, że otrzymasz pustą wartość.
Ryan Walton,
31

Ulepszenie odpowiedzi nobity . Możesz także poprawić wizualny widok listy rozwijanej, ukrywając element „Wybierz tutaj”.

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

Salitha Prasad
źródło
25

Najlepszy sposób moim zdaniem:

<select>
   <option value="" selected="selected" hidden="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>

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.

Michał Mielec
źródło
To ukrywa dla mnie całą opcję
ADEL NAMANI
@ADELNAMANI Czy możesz podać link do swojego kodu? Chyba twój problem nie jest związany z moją odpowiedzią.
Michał Mielec
19

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

// Get the select element
var select = document.getElementById("yourDropDownElementId");
// Create a new option element
var el = document.createElement("option");
// Add our value to the option
el.textContent = "Example Value";
el.value = "Example Value";
// Set the option to selected
el.selected = true;
// Add the new option element to the select element
select.appendChild(el);
Sprzymierzyć
źródło
czy nie powinno to być el.selected = "selected";zgodne ze standardem w3?
7yl4r
5
@ 7yl4r No. selectedto 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.asp
Ally
14

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

<select>
  <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="vw">VW</option>
 <option value="audi" selected>Audi</option> 
</select> 
Tilak
źródło
10

Jeśli reagujesz, możesz użyć defaultValueatrybutu zamiast valuetagu select.

Johan
źródło
7

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ą

<select ng-model="sortVar" ng-init='sortVar="stargazers_count"'>
  <option value="name">Name</option>
  <option selected="selected" value="stargazers_count">Stars</option>
  <option value="language">Language</option>
</select>
Akshay Vijay Jain
źródło
4

Użyłem tej funkcji php do wygenerowania opcji i wstawienia jej do mojego HTML

<?php
  # code to output a set of options for a numeric drop down list
  # parameters: (start, end, step, format, default)
  function numericoptions($start, $end, $step, $formatstring, $default)
  {
    $retstring = "";
    for($i = $start; $i <= $end; $i = $i + $step)
    {
      $retstring = $retstring . '<OPTION ';
      $retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"';
      if($default == $i)
      {
        $retstring = $retstring . ' selected="selected"';
      }
      $retstring = $retstring . '>' . sprintf($formatstring,$i) . '</OPTION> ';
    }

  return $retstring;
  }

?>

A potem w kodzie strony używam go jak poniżej;

<select id="endmin" name="endmin">
  <?php echo numericoptions(0,55,5,'%02d',$endmin); ?>
</select>

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.

Graeme
źródło
4

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

X-Coder
źródło
4

Ten kod ustawia domyślną wartość elementu wyboru HTML w PHP.

<select name="hall" id="hall">
<?php
    $default = 3;
    $nr = 1;
    while($nr < 10){
        if($nr == $default){
            echo "<option selected=\"selected\">". $nr ."</option>";
        }
        else{
            echo "<option>". $nr ."</option>";
        }
        $nr++;
    }
?>
</select>
juliański
źródło
3

Możesz użyć:

<option value="someValue" selected>Some Value</option>

zamiast,

<option value="someValue" selected = "selected">Some Value</option>

oba są równie poprawne.

Sam
źródło
3

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:

   <select name="" id="">
     <option hidden value="default">Select An Option</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
     <option value="4">Four</option>
   </select>
Ahmedakhtar11
źródło
2

Sam go używam

<select selected=''>
    <option value=''></option>
    <option value='1'>ccc</option>
    <option value='2'>xxx</option>
    <option value='3'>zzz</option>
    <option value='4'>aaa</option>
    <option value='5'>qqq</option>
    <option value='6'>wwww</option>
</select>
Юрий Светлов
źródło
2

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.

   Select Option 3 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option selected="selected">3</option>
    <option>4</option>
    <option>5</option>
   </select>
   
   <br/>
   <br/>
   <br/>
   Select Option 5 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option selected="selected">5</option>
   </select>
   
    <br/>
   <br/>
   <br/>
   Select Option 2 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>

Ambuj Khanna
źródło
2

Ustaw wybrane = „wybrane” gdzie wartość opcji to 3

zobacz poniższy przykład

<option selected="selected" value="3" >3</option>
Akbor
źródło
W Firefoksie nie będzie działać przy przeładowywaniu strony
Sebastian
w moim systemie działa na
firefoxie
1

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, ale onchange="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.

<label>Font Size</label>
<select name="fontSize" id="fontSize" onfocus="changeFontSize(this)" onchange="changeFontSize(this)">           
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
    <option value="extraLarge">Extra large</option>
</select>

<script>
function changeFontSize(x){
    body=document.getElementById('body');
    if (x.value=="extraLarge") {
        body.style.fontSize="25px";
    } else {
        body.style.fontSize=x.value;
    }
}
</script>
Jim
źródło
1

Używam Angulara i ustawiam opcję domyślną przez

Szablon HTML

<select #selectConnection [(ngModel)]="selectedVal" class="form-control  col-sm-6 "  max-width="100px"   title="Select" 
      data-size="10"> 
        <option  >test1</option>
        <option >test2</option>      
      </select>

Scenariusz:

sselectedVal:any="test1";
upog
źródło
0

Tak to zrobiłem ...

<form action="../<SamePage>/" method="post">

<?php
    if ( $_POST['drop_down'] == "")
    {
    $selected = "";
    }
    else
    {
    $selected = "selected";
    }
?>

<select name="select" size="1">

  <option value="1" <?php $selected ?>>One</option>
     ////////  OR  ////////
  <option value="2" $selected>Two</option>

</select>
</form>
AlexM
źródło
4
Wydaje się, że istnieje pewne niezgodność z tym rozwiązaniem. Jeśli nazwa elementu to „wybierz”, to czy klucz zmiennej $ _POST nie powinien być „wybierz” - skąd pochodzi „drop_down”? Ponadto, zakładając, że był to błąd, i faktycznie sprawdza wartość zmiennej $ _POST ['select'], każda niepusta wartość zwróci wartość true, a zatem wszystkie elementy <option> zostaną oznaczone jako „wybrane”. Może brakuje mi czegoś integralnego dla tej odpowiedzi?
Ryan
0

Możesz spróbować w ten sposób

  <select name="hall" id="hall">
      <option>1</option>
      <option>2</option>
      <option selected="selected">3</option>
      <option>4</option>
      <option>5</option>
    </select>
tebbe93
źródło
0

Fragment HTML:

<select data-selected="public" class="form-control" name="role">
    <option value="public">
        Pubblica
    </option>
    <option value="user">
        Utenti
    </option>
    <option value="admin">
        Admin
    </option>
</select>

Natywny fragment kodu JavaScript:

document.querySelectorAll('[data-selected]').forEach(e => {
   e.value = e.dataset.selected
});
Mwspace LLC
źródło
0
Upstream System:
<select name=upstream id=upstream>
<option value="SYBASE">SYBASE ASE
<option value="SYBASE_IQ">SYBASE_IQ
<option value="SQLSERVER">SQLSERVER
</select>
<script>
var obj=document.getElementById("upstream");
for (var i=0;i<obj.length;i++){if(obj.options[i].value==="SYBASE_IQ")obj.selectedIndex=i;}
</script>
Dostęp przyznany
źródło