Jak Mogę ustawić domyślną wartość elementu HTML?

W przypadku, gdy chcesz mieć domyślny tekst jako rodzaj elementu zastępczego / podpowiedzi, ale nie uważanego za prawidłową wartość (coś w stylu "uzupełnij tutaj", "wybierz swój kraj" ecc.) 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 przyjęta i bardzo upvoted odpowiedź nie działa dla mnie. Okazuje się, że jeśli używasz Reacta, to ustawienie selected nie działa.

Zamiast tego musisz ustawić wartość w znaczniku <select> 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>

Przeczytaj więcej o tym dlaczego tutaj na stronie React .

Możesz to zrobić tak:

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

Podaj" wybrane " słowo kluczowe wewnątrz znacznika opcji, które chcesz domyślnie pojawić się na rozwijanej liście.

Lub możesz również podać atrybut do znacznika option tj.

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

Jeśli chcesz użyć wartości z formularza i zachować go dynamicznie, wypróbuj to za pomocą 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.

Poprawa dla nobita ' s odpowiedź. Możesz również poprawić wizualny widok rozwijanej listy, 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łączony?

Gdy używasz wyłączonego atrybutu razem z <button type="reset">Reset</button> wartość nie jest resetowana do oryginalnego elementu zastępczego. Zamiast tego przeglądarka najpierw wybierz opcję Nie wyłączoną, która może powodować błędy użytkownika.

Domyślna wartość pusta

Każda forma produkcyjna ma walidację, wtedy pusta wartość nie powinna stanowić problemu. W ten sposób możemy mieć empty not required select.

Atrybuty składni XHTML

selected="selected" składnia jest jedynym sposobem na kompatybilność zarówno z XHTML jak i HTML 5. Jest to poprawna składnia XML i niektórzy edytorzy mogą być z tego zadowoleni. Jest bardziej kompatybilny wstecz. Jeśli zgodność z XML jest ważna, należy postępować zgodnie z pełną składnią.

Inny przykład; użycie JavaScript do ustawienia wybranej opcji.

(możesz użyć tego przykładu do pętli tablicy wartości do rozwijanego komponentu)

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

Atrybut wybrany jest atrybutem logicznym.

Gdy jest obecna, określa, że opcja powinna być wstępnie wybrana podczas ładowania strony.

Wstępnie wybrana opcja zostanie wyświetlona jako pierwsza na rozwijanej liście.

<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 jesteś w reaccie, możesz użyć defaultValue jako atrybutu zamiast value w znaczniku select.

Jeśli używasz select z angular 1, wtedy musisz użyć ng-init, w przeciwnym razie druga opcja nie zostanie wybrana, ponieważ ng-model nadpisuje domyślną wartość

<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, aby wygenerować opcje i wstawić je 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 (a ten kod znajduje się w formularzu, który zamieszcza posty), to domyślnie wybrana wcześniej wybrana wartość.

Brak atrybutu wartości znacznika, więc nie wyświetla się jako U pożądany wybrany. Domyślnie pierwsza opcja Pokaż przy ładowaniu rozwijanej strony, jeśli atrybut value jest ustawiony na tagu.... I got solved my problem this way

Ten kod ustawia domyślną wartość dla elementu HTML select 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>

Chciałbym po prostu zrobić pierwszą wartość opcji select domyślną i po prostu ukryć tę wartość w rozwijanej z nową "ukrytą" funkcją HTML5. Tak:

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

Możesz użyć:

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

Zamiast

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

Oba są jednakowo poprawne.

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

Wystarczy umieścić atrybut "selected" na konkretnej opcji zamiast bezpośrednio wybrać element.

Oto fragment tego samego i wielu przykładów roboczych o różnych wartościach.

   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" gdzie wartość opcji to 3

Zobacz poniższy przykład

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

Problem z <select> polega na tym, że czasami jest ona rozłączona ze stanem aktualnie renderowanego i jeśli coś się nie zmieniło na liście opcji, nie jest zwracana żadna wartość zmiany. Może to być problem podczas próby wybrania pierwszej opcji z listy. Poniższy kod może uzyskać opcję first-option wybraną po raz pierwszy, ale onchange="changeFontSize(this)" przez siebie nie. Istnieją metody opisane powyżej za pomocą opcji atrapy, aby zmusić użytkownika do dokonania zmiany wartości, aby odebrać rzeczywistą pierwszą wartość, taką jako początek listy z pustą wartością. Uwaga: onclick wywoła funkcję dwukrotnie, poniższy kod nie, ale rozwiązuje problem po raz pierwszy.

<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 Angular i ustawiam domyślną opcję 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>

Skrypt:

sselectedVal:any="test1";

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>

Native JavaScript snippet:

document.querySelectorAll('[data-selected]').forEach(e => {
   e.value = e.dataset.selected
});

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>

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>

Aby ustawić domyślne użycie PHP i JavaScript:

State: <select id="State">
<option value="" selected disabled hidden></option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
.
.
<option value="West Bengal">West Bengal</option>
</select>
<?php
if(isset($_GET['State'])){
    echo <<<heredoc
<script>
document.getElementById("State").querySelector('option[value="{$_GET['State']}"]').selected = true;
</script>
heredoc;
}
?>