Bagaimana cara menetapkan nilai default untuk elemen HTML <select>?

Saya pikir menambahkan "value"atribut yang ditetapkan pada <select>elemen di bawah ini akan menyebabkan konten <option>saya yang disediakan "value"dipilih secara default:

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

Namun, ini tidak berhasil seperti yang saya harapkan. Bagaimana saya bisa mengatur <option>elemen mana yang dipilih secara default?

Tetapkan selected="selected"untuk opsi yang Anda inginkan sebagai standar.

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

Jika Anda ingin memiliki teks default sebagai semacam placeholder / hint tetapi tidak dianggap sebagai nilai yang valid (sesuatu seperti "selesai di sini", "pilih negara Anda" ecc.) Anda dapat melakukan sesuatu seperti ini:

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

Contoh lengkap:

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

Saya menemukan pertanyaan ini, tetapi jawaban yang diterima dan sangat tidak berhasil tidak berhasil untuk saya. Ternyata jika Anda menggunakan Bereaksi, maka pengaturan selectedtidak berfungsi.

Sebaliknya, Anda harus menetapkan nilai dalam <select>tag secara langsung seperti yang ditunjukkan di bawah ini:

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

Baca lebih lanjut tentang mengapa di sini di halaman Bereaksi .

Anda bisa melakukannya seperti ini:

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

Berikan kata kunci "terpilih" di dalam tag opsi, yang ingin Anda tampilkan secara default di daftar turun bawah Anda.

Atau Anda juga dapat memberikan atribut ke tag opsi yaitu

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

jika Anda ingin menggunakan nilai-nilai dari Formulir dan tetap dinamis coba ini dengan 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>

Saya lebih memilih ini:

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

'Pilih di sini' menghilang setelah opsi telah dipilih.

Perbaikan untuk jawaban nobita . Anda juga dapat meningkatkan tampilan visual daftar drop-down, dengan menyembunyikan elemen 'Pilih di sini'.

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

Cara terbaik menurut saya:

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

Kenapa tidak dinonaktifkan?

Saat Anda menggunakan atribut yang dinonaktifkan bersama dengan <button type="reset">Reset</button>nilai tidak diatur ulang ke placeholder asli. Sebaliknya browser memilih opsi pertama yang tidak dinonaktifkan yang dapat menyebabkan kesalahan pengguna.

Nilai kosong bawaan

Setiap formulir produksi memiliki validasi, maka nilai kosong seharusnya tidak menjadi masalah. Dengan cara ini, kita mungkin harus memilih kosong tidak diperlukan.

Atribut sintaks XHTML

selected="selected"sintaks adalah satu-satunya cara agar kompatibel dengan XHTML dan HTML 5. Ini adalah sintaks XML yang benar dan beberapa editor mungkin senang dengan hal ini. Ini lebih kompatibel ke belakang. Saya tidak punya perasaan kuat tentang ini, tetapi jika argumen yang disebutkan di atas adalah persyaratan Anda, Anda harus mengikuti sintaksis lengkap.

Contoh lain; menggunakan JavaScript untuk menetapkan opsi yang dipilih.

(Anda bisa menggunakan contoh ini untuk untuk loop array nilai ke komponen drop down)

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

Yang dipilih atribut adalah atribut boolean.

Ketika ada, itu menentukan bahwa opsi harus dipilih sebelumnya ketika halaman dimuat.

Opsi yang dipilih sebelumnya akan ditampilkan pertama kali di daftar drop-down.

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

Jika Anda bereaksi, Anda dapat menggunakan defaultValuesebagai atribut alih-alih valuedi tag pilih.

Jika Anda menggunakan pilih dengan sudut 1, maka Anda perlu menggunakan ng-init, jika tidak, opsi kedua tidak akan dipilih karena, ng-model mengabaikan nilai defaul yang dipilih

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

Saya menggunakan fungsi php ini untuk menghasilkan opsi, dan menyisipkannya ke HTML saya

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

?>

Dan kemudian dalam kode halaman web saya, saya menggunakannya seperti di bawah ini;

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

Jika $ endmin dibuat dari variabel _POST setiap kali halaman dimuat (dan kode ini di dalam formulir yang memposting) maka nilai yang dipilih sebelumnya dipilih secara default.

atribut nilai dari tag tidak ada, sehingga tidak ditampilkan seperti yang Anda pilih. Secara default, opsi pertama ditampilkan pada pemuatan laman tarik-turun, jika atribut nilai disetel pada tag .... Saya menyelesaikan masalah saya dengan cara ini

Kode ini menetapkan nilai default untuk elemen pilih HTML dengan 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>

Kamu bisa menggunakan:

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

dari pada,

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

keduanya sama-sama benar.

Saya hanya akan membuat nilai opsi pilih pertama default dan hanya menyembunyikan nilai itu di dropdown dengan fitur "tersembunyi" baru HTML5. Seperti ini:

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

Saya sendiri menggunakannya

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

Anda hanya perlu menempatkan atribut "terpilih" pada opsi tertentu, bukan langsung memilih elemen.

Berikut ini cuplikan untuk contoh kerja yang sama dan beberapa dengan nilai yang berbeda.

   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" di mana nilai opsi adalah 3

silakan lihat contoh di bawah ini

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

Masalahnya <select>adalah, kadang-kadang terputus dengan keadaan apa yang saat ini diberikan dan kecuali ada sesuatu yang berubah dalam daftar opsi, tidak ada nilai perubahan yang dikembalikan. Ini bisa menjadi masalah ketika mencoba memilih opsi pertama dari daftar. Kode berikut bisa mendapatkan opsi pertama yang pertama kali dipilih, tetapi onchange="changeFontSize(this)"dengan sendirinya tidak. Ada metode yang dijelaskan di atas menggunakan opsi dummy untuk memaksa pengguna untuk membuat nilai perubahan untuk mengambil nilai pertama yang sebenarnya, seperti memulai daftar dengan nilai kosong. Catatan: onclick akan memanggil fungsi dua kali, kode berikut tidak, tetapi memecahkan masalah pertama kali.

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

Saya menggunakan Angular dan saya mengatur opsi default dengan

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

Naskah:

sselectedVal:any="test1";

Ini adalah bagaimana saya melakukannya ...

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

Anda bisa coba seperti ini

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

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

Cuplikan JavaScript asli:

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>