it-swarm.com.de

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

Ich dachte, das Hinzufügen eines "value"-Attributsatzes für das <select>-Element würde dazu führen, dass der <option>, der meinen bereitgestellten "value" enthält, 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 einstellen, welches <option>-Element standardmäßig ausgewählt ist?

1158
Jichao

Legen Sie selected="selected" für die Option fest, die Sie als Standard festlegen möchten.

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

Wenn Sie einen Standardtext als eine Art Platzhalter/Hinweis haben möchten, der jedoch nicht als gültiger Wert (z. B. "hier vollständig ausfüllen", "Ihre Nation auswählen" usw.) gilt, 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>

418
Nobita

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> 

214
RedFilter

Ich bin auf diese Frage gestoßen, aber die akzeptierte und hochgelobte Antwort hat für mich nicht funktioniert. Es stellt sich heraus, dass die Einstellung von selected nicht funktioniert, wenn Sie React verwenden.

Stattdessen müssen Sie einen Wert im <select>-Tag direkt wie folgt einstellen:

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

Lesen Sie mehr darüber, warum hier auf der React-Seite .

63
MindJuice

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 im Options-Tag ein "ausgewähltes" Schlüsselwort an, das standardmäßig in Ihrer Dropdown-Liste angezeigt werden soll.

Oder Sie können das Option-Tag auch mit Attributen versehen, d. H. 

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

wenn Sie die Werte eines Formulars verwenden und dynamisch bleiben 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>
47
Florian

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' wird ausgeblendet, nachdem eine Option ausgewählt wurde.

35
Chong Lip Phang

Eine Verbesserung für die Antwort von nobita . 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>

27
Salitha Prasad

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

(Sie können dieses Beispiel verwenden, um ein Array von Werten in eine Dropdown-Komponente zu 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);
16
Ally

Das selected -Attribut ist ein boolesches Attribut.

Wenn vorhanden, wird angegeben, dass beim Laden der Seite eine Option vorgewä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> 
12
tilak

Wenn Sie reagieren, können Sie defaultValue als Attribut anstelle von value im select-Tag verwenden.

6
Johan

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 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>
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 sie in meinem Webseiten-Code 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 veröffentlicht), wird standardmäßig der zuvor ausgewählte Wert ausgewählt.

3
Graeme

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

3
X-Coder

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

Ich würde einfach den ersten Wert für die Auswahloption als Standard festlegen und diesen Wert einfach mit der neuen "ausgeblendeten" 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>
2
Ahmedakhtar11

Sie können verwenden:

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

anstatt,

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

beide sind gleichermaßen richtig.

2
Samim

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>

Das Problem mit <select> ist, dass es manchmal mit dem Status der aktuell gerenderten Darstellung nicht verbunden ist. Sofern 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, onchange="changeFontSize(this)" jedoch nicht. Es gibt oben beschriebene Methoden, die eine Dummy-Option verwenden, um einen Benutzer zu zwingen, einen Änderungswert zum Abrufen des tatsächlichen ersten Werts vorzunehmen, beispielsweise das Starten der Liste mit einem leeren Wert. Hinweis: Onclick ruft die Funktion zweimal auf, der folgende Code jedoch 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>
0
Jim

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

Am besten 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 deaktivierte Attribut zusammen mit <button type="reset">Reset</button> verwenden, wird der Wert nicht auf den ursprünglichen Platzhalter zurückgesetzt. Stattdessen wählt der Browser zuerst eine nicht deaktivierte Option aus, die Benutzerfehler verursachen kann.

Standardwert für leeren Wert

Jedes Produktionsformular hat eine Validierung, dann sollte der leere Wert kein Problem sein. Auf diese Weise haben wir möglicherweise keine Auswahl getroffen.

XHTML-Syntaxattribute

Die selected="selected"-Syntax ist der einzige Weg, um sowohl mit XHTML als auch mit HTML 5 kompatibel zu sein. Es handelt sich um korrekte XML-Syntax, und einige Editoren freuen sich darüber. Es ist mehr abwärtskompatibel. Ich habe kein starkes Gefühl dabei, aber wenn die oben genannten Argumente Ihre Anforderungen sind, sollten Sie der vollen Syntax folgen.

0
Michał Mielec

Sie müssen lediglich das Attribut "selected" auf eine bestimmte Option setzen, statt das Element direkt 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>

0
Ambuj Khanna