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


1459

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?


Wow, pertanyaan ini sangat membantu dan benar-benar menjadi viral haha
finnmglas

Jawaban:


2152

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

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

19
<option value = "3" selected = "selected"> 3 </option> Nilai akan diteruskan sebagai string ketika opsi 3 dipilih.
Sree Rama

5
Dan terus menggunakan atribut id untuk <Pilih> dan tidak baik menggunakan atribut nilai untuk elemen html <select>.
Sree Rama

216
Bagian = "terpilih" tidak diperlukan. Hanya <opsi yang dipilih> akan melakukan seperti yang disebutkan dalam jawaban lain.
MindJuice

56
@MindJuice Apa yang saya tulis adalah polyglot HTML / XML yang valid. Menggunakan <opsi yang dipilih> tidak apa-apa untuk peramban, tetapi dapat menyebabkan dokumen ditolak oleh pengurai lainnya. Saya merasa berguna untuk dapat menggunakan XPath / XSLT pada dokumen web sesekali.
Borealid

70
Jika Anda menggunakan Angular, perhatikan bahwa ng-modelmenimpa nilai yang dipilih default (bahkan tidak terdefinisi jika Anda tidak menetapkan objek terikat). Butuh waktu beberapa saat untuk mencari alasan mengapa selected="selected"opsi tidak dipilih.
metakermit

626

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>


61
Saya akan berpikir inilah yang kebanyakan orang cari. Jawaban yang bagus.
chrisallick

1
Itu adalah jsfiddle eksternal di mana css hanya diperlukan untuk tidak membuatnya muncul di sepanjang perbatasan layar. Setelah beberapa bulan itu diedit ke potongan kode sebaris dan orang yang diedit hanya menyimpannya dalam contoh. Anda dapat mengedit dan menghapusnya dari cuplikan jika benar-benar mengganggu Anda.
Nobita

Solusi yang lebih baik adalah dengan menggunakan hiddenatribut saja. Lihat jawaban @ chong-lip-phang di bawah ini: stackoverflow.com/a/39358987/1192426
Ivan Akulov

<option value="" selected disabled hidden>Choose here</option>

1
Jawaban yang luar biasa!
japes Sophey

234

Contoh lengkap:

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


11
Itu lebih sederhana daripada menggunakan terpilih = "terpilih".
Rodrigo

57
terpilih = "terpilih" harus bekerja untuk semua DOCTYPE. XHTML tidak suka atribut tanpa nilai.
ps2goat

14
@ Rodrigo Apakah benar-benar sulit untuk menulis selected="selected"? Maksud saya, apa yang Anda tabung? Waktu? Ukuran? Ini dapat diabaikan dan jika membuat kode lebih "sesuai", mengapa tidak melakukannya ?
xDaizu

15
@ DanielParejoMuñoz, ok, bisa diabaikan. Tetapi jika doctype saya adalah html, dan bukan xhtml, mengapa membuang byte sama sekali?
Rodrigo

5
terpilih = "terpilih" terlihat seperti kesalahan. Dalam beberapa bulan saya mungkin akan mengubahnya menjadi terpilih = "3" berpikir bahwa ini berarti bahwa item 3 dipilih. (dan hancurkan halaman saya)
Paul McCarthy

92

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 .


2
Anda dapat mengatur opsi yang dipilih sebelumnya dalam daftar drop-down dengan menggunakan valueatribut untuk <select>tag, yaitu <select value="3">, tetapi itu tidak valid dalam validator W3C.
Rasul

4
Benar, tapi ini bukan HTML, ini JSX, jadi tidak perlu mengikuti aturan W3C. HTML yang dihasilkan oleh React pada akhirnya valid.
MindJuice

Di dunia yang sempurna ini telah menjadi komentar untuk pertanyaan, karena itu bukan jawaban yang valid. Tapi saya kira itu memiliki nilai yang cukup untuk bertahan.
Justus Romijn

2
Saya membutuhkan solusi yang mirip dengan saran di atas, tetapi dengan JQuery alih-alih Bereaksi. Dalam hal ini membantu siapa pun di masa depan:$("select").each(function(){ $(this).find('option[value="'+$(this).attr("value")+'"]').prop('selected', true); });
CDK

Jawaban ini tidak valid, pertanyaan mendasarnya adalah berbicara tentang HTML bukan Bereaksi (JSX).
Aaron C

72

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>

13
Untuk lebih jelasnya, standar w3 adalah <option selected = "selected"> 3 </option>
htmldrum

40
@ JRM Saya pikir apa yang Anda maksud adalah bahwa jika dokumen Anda menjadi XHTML dari atribut harus memiliki nilai aa. Dalam HTML tidak perlu "terpilih = terpilih". Contoh-contoh di w3.org/wiki/HTML/Elements/select , developer.mozilla.org/en-US/docs/HTML/Element/select tidak menentukan nilai. Yang penting untuk diperhatikan adalah yang selected="false"tidak diperbolehkan dan selected=""juga membuatnya dipilih. Satu-satunya cara untuk membuat opsi yang tidak dipilih adalah menghapus atribut. w3.org/html/wg/drafts/html/master/…
Juan Mendes

3
Saya tidak pernah mengerti bagaimana pertanyaan seperti ini pernah terangkat. Mereka PERSIS seperti jawaban yang tepat. 2 tahun kemudian lol
Phil

51

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>

40

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.


1
Saya sudah mencoba ini tetapi "Pilih di sini" tidak ditampilkan. Opsi pertama kosong
Bogdan Mates

Browser apa yang Anda gunakan?
Chong Lip Phang

Saya menggunakan browser Google Chrome versi 52.0.2743.116 m
Bogdan Mates

2
Saya menggunakan browser itu juga dan tidak mengalami masalah.
Chong Lip Phang

2
Pertimbangkan menambahkan value=""untuk memastikan Anda mendapatkan nilai kosong.
Ryan Walton

31

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>


25

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.


Itu menyembunyikan seluruh opsi bagi saya
ADEL NAMANI

@ADELNAMANI Bisakah Anda memberikan tautan ke kode Anda? Saya kira masalah Anda tidak terkait dengan jawaban saya.
Michał Mielec

19

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

bukankah itu harus el.selected = "selected";memenuhi standar w3?
7yl4r

5
@ 7yl4r No. selectedadalah properti boolean sebagaimana didefinisikan oleh w3c - w3.org/TR/html401/interact/forms.html `17.6.1 Opsi yang dipilih sebelumnya dipilih [CI] - Saat diatur, atribut boolean ini menetapkan bahwa opsi ini adalah pra-terpilih.` Untuk informasi lebih lanjut tentang penggunaan, lihat sekolah w3c - w3schools.com/jsref/prop_option_selected.asp
Ally

14

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> 

10

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


7

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>

4

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.


4

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


4

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>

3

Kamu bisa menggunakan:

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

dari pada,

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

keduanya sama-sama benar.


3

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>

2

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>

2

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>


2

Set selected = "selected" di mana nilai opsi adalah 3

silakan lihat contoh di bawah ini

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

Di Firefox, itu tidak akan berfungsi pada pemuatan ulang halaman
Sebastian

pada sistem saya ini bekerja pada firefox
Akbor

1

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>

1

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

0

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>

4
Tampaknya ada beberapa ketidaksesuaian untuk solusi ini. Jika nama elemennya "pilih", bukankah kunci variabel $ _POST harus "pilih" - dari mana "drop_down" berasal? Juga, dengan asumsi itu adalah kesalahan, dan ini sebenarnya memeriksa variabel $ _POST ['select'] untuk suatu nilai, setiap nilai yang tidak kosong akan mengembalikan true, dan dengan demikian semua item <option> akan ditandai "terpilih". Mungkin saya kehilangan sesuatu yang tidak terpisahkan dari jawaban ini?
Ryan

0

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>

0

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

0
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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.