Wie kann ich den Standardwert für ein HTML-Element <select> festlegen?

1457

Ich dachte, dass das Hinzufügen eines "value"Attributsatzes für das folgende <select>Element dazu führen würde, dass das <option>enthaltende Attribut "value"standardmäßig ausgewählt wird:

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

Dies funktionierte jedoch nicht wie erwartet. Wie kann ich festlegen, welches <option>Element standardmäßig ausgewählt ist?

Jichao
quelle
Wow, diese Frage ist so hilfreich und sie wurde buchstäblich viral haha
finnmglas

Antworten:

2151

Stellen Sie selected="selected"die Option ein, die Sie als Standard festlegen möchten.

<option selected="selected">
3
</option>
Borealid
quelle
19
<option value = "3" selected = "selected"> 3 </ option> Der Wert wird bei Auswahl von Option 3 als Zeichenfolge übergeben.
Sree Rama
5
Verwenden Sie weiterhin das ID-Attribut für <Auswählen>, und es ist nicht sinnvoll, das Wertattribut für das HTML-Element <Auswählen> zu verwenden.
Sree Rama
216
Der Teil = "ausgewählt" ist nicht erforderlich. Nur <Option ausgewählt> funktioniert wie in anderen Antworten erwähnt.
MindJuice
56
@ MindJuice Was ich geschrieben habe, ist gültiges polyglottes HTML / XML. Die Verwendung von <Option ausgewählt> ist für einen Browser in Ordnung, kann jedoch dazu führen, dass das Dokument von anderen Parsern abgelehnt wird. Ich finde es praktisch, gelegentlich XPath / XSLT für Webdokumente verwenden zu können.
Borealid
70
Wenn Sie Angular verwenden, beachten Sie, dass ng-modelder standardmäßig ausgewählte Wert überschrieben wird (auch als undefiniert, wenn Sie das gebundene Objekt nicht festgelegt haben). Ich habe eine Weile gebraucht, um herauszufinden, warum die selected="selected"Option nicht ausgewählt wurde.
Metakermit
625

Wenn Sie einen Standardtext als eine Art Platzhalter / Hinweis haben möchten, der jedoch nicht als gültiger Wert angesehen wird (z. B. "Hier vervollständigen", "Wählen Sie Ihre Nation aus"), können Sie Folgendes tun:

<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
quelle
60
Ich würde denken, das ist es, wonach die meisten Leute suchen. Gute Antwort.
Chrisallick
1
Es war eine externe jsfiddle, bei der das CSS nur benötigt wurde, um es nicht am Rand des Bildschirms erscheinen zu lassen. Nach einigen Monaten wurde es zu einem Inline-Code-Snippet bearbeitet, und der Typ, der es bearbeitet hat, hat es einfach im Beispiel beibehalten. Sie können es bearbeiten und aus dem Snippet entfernen, wenn es Sie wirklich stört.
Nobita
Eine noch bessere Lösung besteht darin hidden, stattdessen das Attribut zu verwenden. Siehe die Antwort von @ chong-lip-phang unten: stackoverflow.com/a/39358987/1192426
Ivan Akulov
<option value="" selected disabled hidden>Choose here</option>
1
Super Antwort!
Japes Sophey
234

Vollständiges Beispiel:

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

RedFilter
quelle
11
Das ist einfacher als mit selected = "selected".
Rodrigo
57
selected = "selected" sollte für alle Doctypes funktionieren. XHTML mag keine Attribute ohne Werte.
ps2goat
14
@Rodrigo Ist es wirklich so schwer zu schreiben selected="selected"? Ich meine, was sparst du? Zeit? Größe? Es ist vernachlässigbar und wenn es den Code "konformer" macht, warum nicht ?
xDaizu
15
@ DanielParejoMuñoz, ok, es ist vernachlässigbar. Aber wenn mein Doctype HTML und nicht Xhtml ist, warum überhaupt ein Byte verschwenden?
Rodrigo
5
selected = "selected" sieht aus wie ein Fehler. In ein paar Monaten würde ich es wahrscheinlich in selected = "3" ändern, da ich denke, dass dies bedeutet, dass Punkt 3 ausgewählt ist. (und brechen Sie meine Seite)
Paul McCarthy
92

Ich bin auf diese Frage gestoßen, aber die akzeptierte und hoch bewertete Antwort hat bei mir nicht funktioniert. Es stellt sich heraus, dass die Einstellung selectednicht funktioniert , wenn Sie React verwenden .

Stattdessen müssen Sie einen Wert <select>direkt im Tag festlegen, wie unten gezeigt:

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

Weitere Informationen dazu finden Sie hier auf der Seite Reagieren .

MindJuice
quelle
2
Sie können eine vorgewählte Option in einer Dropdown-Liste festlegen, indem Sie das valueAttribut für das <select>Tag verwenden, dh <select value="3">es ist im W3C-Validator nicht gültig.
Apostel
4
Richtig, aber dies ist kein HTML, sondern JSX, sodass keine W3C-Regeln befolgt werden müssen. Der am Ende von React generierte HTML-Code ist jedoch gültig.
MindJuice
In einer perfekten Welt war dies ein Kommentar zu der Frage, da dies keine gültige Antwort ist. Aber ich denke, es hat genug Wert, um hier zu bleiben.
Justus Romijn
2
Ich brauchte eine ähnliche Lösung wie oben, aber mit JQuery anstelle von React. Für den Fall, dass es jemandem in der Zukunft hilft:$("select").each(function(){ $(this).find('option[value="'+$(this).attr("value")+'"]').prop('selected', true); });
CDK
Diese Antwort ist ungültig. Die zugrunde liegende Frage bezieht sich auf HTML not React (JSX).
Aaron C
72

Sie können es so machen:

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

Geben Sie das Schlüsselwort "selected" in das Options-Tag ein, das standardmäßig in Ihrer Dropdown-Liste angezeigt werden soll.

Sie können dem Options-Tag auch ein Attribut bereitstellen, z

<option selected="selected">3</option>
harmender
quelle
13
Um ganz klar zu sein, der w3-Standard ist <option selected = "selected"> 3 </ option>
htmldrum
40
@JRM Ich denke, Sie meinen, wenn ein Dokument XHTML-kompatibel sein soll, muss ein Attribut einen Wert haben. In HTML ist "selected = selected" nicht erforderlich. In den Beispielen unter w3.org/wiki/HTML/Elements/select , developer.mozilla.org/en-US/docs/HTML/Element/select wird kein Wert angegeben. Wichtig ist, dass dies selected="false"nicht zulässig ist und selected=""auch ausgewählt wird. Die einzige Möglichkeit, nicht ausgewählte Optionen auszuwählen, besteht darin, das Attribut zu entfernen. w3.org/html/wg/drafts/html/master/…
Juan Mendes
3
Ich verstehe nie, wie solche Fragen jemals beantwortet werden. Sie sind genau wie die richtige Antwort noch .. 2 Jahre später lol
Phil
51

Wenn Sie die Werte aus einem Formular verwenden und dynamisch halten möchten, versuchen Sie dies mit 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
quelle
40

Ich bevorzuge das:

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

'Hier auswählen' verschwindet, nachdem eine Option ausgewählt wurde.

Chong Lip Phang
quelle
1
Ich habe es versucht, aber "Hier auswählen" wird nicht angezeigt. Die erste Option ist leer
Bogdan Mates
Welchen Browser verwenden Sie?
Chong Lip Phang
Ich benutze Google Chrome Browser Version 52.0.2743.116 m
Bogdan Mates
2
Ich benutze diesen Browser auch und habe kein Problem.
Chong Lip Phang
2
Erwägen Sie das Hinzufügen value="", um sicherzustellen, dass Sie einen leeren Wert erhalten.
Ryan Walton
31

Eine Verbesserung für Nobitas Antwort. Sie können auch die visuelle Ansicht der Dropdown-Liste verbessern, indem Sie das Element "Hier auswählen" ausblenden.

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

Bester Weg meiner Meinung nach:

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

Warum nicht deaktiviert?

Wenn Sie das Attribut disabled zusammen mit <button type="reset">Reset</button>value verwenden, wird es nicht auf den ursprünglichen Platzhalter zurückgesetzt. Stattdessen wählt der Browser zuerst die Option nicht deaktiviert, was zu Benutzerfehlern führen kann.

Standard leerer Wert

Jedes Produktionsformular hat eine Validierung, dann sollte ein leerer Wert kein Problem sein. Auf diese Weise haben wir möglicherweise leere nicht benötigte Auswahl.

XHTML-Syntaxattribute

selected="selected"Die Syntax ist die einzige Möglichkeit, sowohl mit XHTML als auch mit HTML 5 kompatibel zu sein. Es handelt sich um die korrekte XML-Syntax, und einige Editoren können sich darüber freuen. Es ist abwärtskompatibler. Ich habe kein starkes Gefühl dafür, aber wenn die oben genannten Argumente Ihre Anforderungen sind, sollten Sie die vollständige Syntax befolgen.

Michał Mielec
quelle
Das verbirgt die ganze Option für mich
ADEL NAMANI
@ADELNAMANI Könnten Sie den Link zu Ihrem Code bereitstellen? Ich denke, Ihr Problem hängt nicht mit meiner Antwort zusammen.
Michał Mielec
19

Ein anderes Beispiel; Verwenden von JavaScript zum Festlegen einer ausgewählten Option.

(Mit diesem Beispiel können Sie ein Array von Werten in eine Dropdown-Komponente schleifen.)

<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);
Verbündete
quelle
sollte das nicht sein el.selected = "selected";, um dem w3-standard zu entsprechen?
7yl4r
5
@ 7yl4r No. selectedist eine boolesche Eigenschaft gemäß w3c - w3.org/TR/html401/interact/forms.html `17.6.1 Vorausgewählte Optionen ausgewählt [CI] - Wenn diese Option festgelegt ist, gibt dieses boolesche Attribut an, dass diese Option aktiviert ist Vorausgewählt.` Weitere Informationen zur Verwendung finden Sie unter w3c Schulen - w3schools.com/jsref/prop_option_selected.asp
Verbündeter
14

Das ausgewählte Attribut ist ein boolesches Attribut.

Wenn vorhanden, wird festgelegt, dass beim Laden der Seite eine Option ausgewählt werden soll.

Die vorgewählte Option wird zuerst in der Dropdown-Liste angezeigt.

<select>
  <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="vw">VW</option>
 <option value="audi" selected>Audi</option> 
</select> 
Tilak
quelle
10

Wenn Sie reagieren, können Sie defaultValueals Attribut anstelle des valueAuswahl-Tags verwenden.

Johan
quelle
7

Wenn Sie select mit Winkel 1 verwenden, müssen Sie ng-init verwenden. Andernfalls wird die zweite Option nicht ausgewählt, da ng-model den standardmäßig ausgewählten Wert überschreibt

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

Ich habe diese PHP-Funktion verwendet, um die Optionen zu generieren und in meinen HTML-Code einzufügen

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

?>

Und dann verwende ich es in meinem Webseitencode wie folgt;

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

Wenn $ endmin bei jedem Laden der Seite aus einer _POST-Variablen erstellt wird (und dieser Code sich in einem Formular befindet, das Beiträge veröffentlicht), wird standardmäßig der zuvor ausgewählte Wert ausgewählt.

Graeme
quelle
4

Das Wertattribut des Tags fehlt, sodass es nicht wie gewünscht angezeigt wird. Standardmäßig wird die erste Option beim Laden der Dropdown-Seite angezeigt, wenn das Wertattribut für das Tag festgelegt ist. Ich habe mein Problem auf diese Weise gelöst

X-Coder
quelle
4

Dieser Code legt den Standardwert für das HTML-Auswahlelement mit PHP fest.

<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>
julianisch
quelle
3

Sie können verwenden:

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

anstatt,

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

beide sind gleich richtig.

Sam
quelle
3

Ich würde einfach den ersten Auswahloptionswert zum Standardwert machen und diesen Wert einfach in der Dropdown-Liste mit der neuen "versteckten" Funktion von HTML5 ausblenden. So was:

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

Ich selbst benutze es

<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>
Юрий Светлов
quelle
2

Sie müssen nur das Attribut "selected" für eine bestimmte Option festlegen, anstatt direkt ein Element auszuwählen.

Hier ist ein Ausschnitt für dasselbe und mehrere Arbeitsbeispiele mit unterschiedlichen Werten.

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

Set selected = "selected", wobei der Optionswert 3 ist

Bitte sehen Sie das folgende Beispiel

<option selected="selected" value="3" >3</option>
Akbor
quelle
Unter Firefox funktioniert es
Sebastian
auf meinem System seine Arbeit an Firefox
Akbor
1

Das Problem dabei <select>ist, dass es manchmal nicht mit dem Status des aktuell gerenderten Objekts verbunden ist. Wenn sich in der Optionsliste nichts geändert hat, wird kein Änderungswert zurückgegeben. Dies kann ein Problem sein, wenn Sie versuchen, die erste Option aus einer Liste auszuwählen. Der folgende Code kann die erste Option beim erstmaligen Auswählen erhalten, würde dies jedoch onchange="changeFontSize(this)"selbst nicht tun. Es gibt oben beschriebene Methoden, die eine Dummy-Option verwenden, um einen Benutzer zu zwingen, einen Änderungswert vorzunehmen, um den tatsächlichen ersten Wert aufzunehmen, z. B. das Starten der Liste mit einem leeren Wert. Hinweis: onclick würde die Funktion zweimal aufrufen, der folgende Code nicht, löst jedoch das erstmalige Problem.

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

Ich benutze Angular und setze die Standardoption von

HTML-Vorlage

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

Skript:

sselectedVal:any="test1";
upog
quelle
0

So habe ich es gemacht ...

<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
quelle
4
Diese Lösung scheint inkongruent zu sein. Wenn der Name des Elements "select" lautet, sollte der Variablenschlüssel $ _POST nicht "select" sein - woher kommt "drop_down"? Unter der Annahme, dass dies ein Fehler war und die Variable $ _POST ['select'] tatsächlich auf einen Wert überprüft wird, gibt jeder nicht leere Wert true zurück, und daher werden alle <option> -Elemente als "selected" markiert. Vielleicht fehlt mir etwas, das für diese Antwort von wesentlicher Bedeutung ist?
Ryan
0

Sie können es so versuchen

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

HTML-Snippet:

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

Natives JavaScript-Snippet:

document.querySelectorAll('[data-selected]').forEach(e => {
   e.value = e.dataset.selected
});
Mwspace LLC
quelle
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>
Zugriff gewährt
quelle