Come posso impostare il valore predefinito per un elemento HTML <select>?

Ho pensato che l'aggiunta di un "value"set di attributi <select>sull'elemento seguente avrebbe fatto sì che il <option>contenuto di my fornito "value"fosse selezionato per impostazione predefinita:

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

Tuttavia, questo non ha funzionato come mi aspettavo. Come posso impostare quale <option>elemento è selezionato per impostazione predefinita?

Impostare selected="selected"per l'opzione che si desidera essere predefinita.

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

Se vuoi avere un testo predefinito come una sorta di segnaposto / suggerimento ma non considerato un valore valido (qualcosa come "completa qui", "seleziona la tua nazione" ecc.) Puoi fare qualcosa del genere:

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

Esempio completo:

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

Mi sono imbattuto in questa domanda, ma la risposta accettata e altamente votata non ha funzionato per me. Si scopre che se si utilizza React, l'impostazione selectednon funziona.

Invece devi impostare un valore nel <select>tag direttamente come mostrato di seguito:

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

Leggi di più sul perché qui nella pagina React .

Puoi farlo in questo modo:

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

Fornire la parola chiave "selezionata" all'interno del tag opzione, che si desidera visualizzare per impostazione predefinita nell'elenco a discesa.

Oppure puoi anche fornire un attributo al tag opzione, ad es

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

se vuoi usare i valori di un modulo e mantenerlo dinamico prova questo con 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>

Preferisco questo:

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

'Scegli qui' scompare dopo che è stata selezionata un'opzione.

Un miglioramento per la risposta di nobita . Inoltre puoi migliorare la vista visiva dell'elenco a discesa, nascondendo l'elemento 'Scegli qui'.

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

Il modo migliore secondo me:

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

Perché non disabilitato?

Quando si utilizza l'attributo disabilitato insieme al <button type="reset">Reset</button>valore non viene ripristinato il segnaposto originale. Invece il browser sceglie prima l'opzione non disabilitata che può causare errori dell'utente.

Valore vuoto predefinito

Ogni modulo di produzione ha una convalida, quindi il valore vuoto non dovrebbe essere un problema. In questo modo potremmo avere vuoto non richiesto selezionare.

Attributi della sintassi XHTML

selected="selected"La sintassi è l'unico modo per essere compatibile con XHTML e HTML 5. È la sintassi XML corretta e alcuni editor potrebbero esserne contenti. È più compatibile con le versioni precedenti. Non ho un forte sentimento al riguardo, ma se i suddetti argomenti sono i tuoi requisiti, dovresti seguire la sintassi completa.

Un altro esempio; utilizzando JavaScript per impostare un'opzione selezionata.

(È possibile utilizzare questo esempio per eseguire il ciclo di una matrice di valori in un componente a discesa)

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

L' attributo selezionato è un attributo booleano.

Se presente, specifica che un'opzione deve essere preselezionata al caricamento della pagina.

L'opzione preselezionata verrà visualizzata per prima nell'elenco a discesa.

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

Se sei in reazione puoi usare defaultValuecome attributo invece che valuenel tag select.

Se si utilizza select con l'angolo 1, è necessario utilizzare ng-init, altrimenti la seconda opzione non verrà selezionata poiché ng-model sovrascrive il valore predefinito defaul

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

Ho usato questa funzione php per generare le opzioni e inserirla nel mio 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;
  }

?>

E poi nel mio codice della pagina web lo uso come di seguito;

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

Se $ endmin viene creato da una variabile _POST ogni volta che la pagina viene caricata (e questo codice è all'interno di un modulo che pubblica), il valore selezionato in precedenza viene selezionato per impostazione predefinita.

manca l'attributo value del tag, quindi non viene visualizzato come desiderato selezionato. Per impostazione predefinita, la prima opzione mostra al caricamento della pagina a discesa, se l'attributo value è impostato sul tag .... Ho risolto il mio problema in questo modo

Questo codice imposta il valore predefinito per l'elemento di selezione HTML con 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>

Puoi usare:

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

invece di,

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

entrambi sono ugualmente corretti.

Vorrei semplicemente impostare come valore predefinito la prima opzione di selezione e nascondere quel valore nel menu a discesa con la nuova funzione "nascosta" di HTML5. Come questo:

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

Io stesso lo uso

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

Hai solo bisogno di mettere l'attributo "selezionato" su una particolare opzione invece direttamente per selezionare l'elemento.

Ecco lo snippet per lo stesso esempio di lavoro multiplo con valori diversi.

   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>

Imposta selezionato = "selezionato" dove il valore dell'opzione è 3

vedere l'esempio seguente

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

Il problema <select>è che a volte è disconnesso dallo stato di ciò che è attualmente visualizzato e, a meno che qualcosa non sia cambiato nell'elenco delle opzioni, non viene restituito alcun valore di modifica. Questo può essere un problema quando si tenta di selezionare la prima opzione da un elenco. Il codice seguente può ottenere la prima opzione la prima volta selezionata, ma onchange="changeFontSize(this)"da sola non lo farebbe. Esistono metodi sopra descritti che utilizzano un'opzione fittizia per forzare un utente ad apportare un valore di modifica per prelevare il primo valore effettivo, come l'avvio dell'elenco con un valore vuoto. Nota: onclick chiamerebbe la funzione due volte, il seguente codice no, ma risolve il problema per la prima volta.

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

Uso Angular e imposto l'opzione predefinita da

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

script:

sselectedVal:any="test1";

Ecco come l'ho fatto ...

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

Puoi provare così

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

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

Snippet JavaScript nativo:

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>