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

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?

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

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

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>

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> 

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 .

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>

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>

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.

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>

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.

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

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> 

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

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>

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.

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

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>

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.

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>

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>

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>

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

zobacz poniższy przykład

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

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>

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

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>

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>

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

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>