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

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?

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

<option selected="selected">
3
</option>

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>

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> 

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 .

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>

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>

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.

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>

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.

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

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> 

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

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>

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.

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

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>

Sie können verwenden:

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

anstatt,

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

beide sind gleich richtig.

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>

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>

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>

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

Bitte sehen Sie das folgende Beispiel

<option selected="selected" value="3" >3</option>

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>

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

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>

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>

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

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>