Bagaimana cara menunjukkan opsi pilih menonaktifkan HTML secara default?

139

Saya baru mengenal HTML dan PHP dan ingin mencapai menu drop-down dari tabel mysql dan juga hard-coded. Saya memiliki beberapa pilihan di halaman saya, Salah satunya adalah

<select name="tagging">
    <option value="">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

Masalahnya sekarang adalah bahwa pengguna juga dapat memilih "Pilih Tagging" sebagai taggingnya tetapi saya hanya ingin memberinya untuk memilih dari tiga yang tersedia. Saya menggunakan disable as

<select name="tagging">
    <option value="" disabled="disabled">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

Tapi sekarang "Opsi A" menjadi yang default. Jadi saya ingin mengatur "Pilih Tagging" sebagai default dan juga ingin menonaktifkannya dari pilihan. Apakah ini cara untuk melakukan ini? Hal yang sama harus dilakukan dengan pemilihan lain yang akan mengambil data dari Mysql. Setiap saran akan sangat berarti.

Ankit Sharma
sumber
bagaimana dengan menambahkan acara klik pada pilih untuk menonaktifkan opsi pertama.
David Blacksmith
Anda harus memperbaiki kesalahan sintaksis - nilai = "" dinonaktifkan harus dinonaktifkan = "dinonaktifkan" + hapus tag penutup aneh </select>
Evgeniy
@Evgeniy oops bahwa </select> milik bagian lain dari kode saya
Ankit Sharma
@AnkitSharma saya telah mengedit kode Anda - Anda telah </select><select> <option> ... <option> </select>
Evgeniy
@Evgeniy thanx ..... </select> tidak sengaja disalin dari kode saya.
Ankit Sharma

Jawaban:

291

menggunakan

<option selected="true" disabled="disabled">Choose Tagging</option>    
Cris
sumber
42
Anda tidak perlu meletakkan nilai true- disablednilainya. Anda bisa melakukannya dengan melakukan<option selected disabled>Choose Tagging</option>
Sam Eaton
18
@ SamEaton, itu hanya membuat kode untuk mengikuti sintaks XHTML yang valid, kalau tidak di HTML5 Anda dapat mengabaikannya.
Cris
1
Anda harus mengatur nilai = "" jadi jika Anda juga telah diminta maka kesalahan akan dimunculkan untuk memilih dari dropdown, jika tidak, nilai kosong akan dilewati meskipun tidak ada yang dipilih. <option selected="true" disabled="disabled" value="">Choose Tagging</option>
user34612
27

Dalam HTML5, untuk memilih opsi yang dinonaktifkan:

<option selected disabled>Choose Tagging</option>
Pradeep Kumar Prabaharan
sumber
10

Saya tahu Anda bertanya cara menonaktifkan opsi, tetapi saya pikir pengguna akhir hasil visualnya sama dengan solusi ini, meskipun mungkin sedikit menuntut sumber daya yang lebih sedikit.

Gunakan tag optgroup , seperti:

<select name="tagging">
    <optgroup label="Choose Tagging">
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
    </optgroup>
</select>
Mandrake
sumber
3
Ini tidak berfungsi, OP perlu dipilih secara default jsfiddle.net/tomsihap/5xm7grnb
tomsihap
10

Electron + React Biarkan dua opsi pertama Anda menjadi seperti ini

<option hidden="true>Choose Tagging</option>
<option disabled="disabled" default="true">Choose Tagging</option>

Pertama untuk ditampilkan ketika ditutup Kedua untuk ditampilkan pertama kali ketika daftar terbuka

Benjamin
sumber
8

Gunakan hidden.

<select>
   <option hidden>Choose</option>
   <option>Item 1</option>
   <option>Item 2</option>
</select>

Ini tidak menghapusnya tetapi Anda dapat menyembunyikannya di opsi saat itu ditampilkan secara default.

Sangat berbahaya
sumber
6

Solusi tag SELECT lain untuk mereka yang ingin membiarkan opsi pertama kosong.

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none"></option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>

c0degeas
sumber
3
 selected disabled="true"

Gunakan ini. Ini akan bekerja di browser baru

Ronak Bokaria
sumber
3

kita dapat menonaktifkan menggunakan teknik ini.

<select class="form-control" name="option_select">
  <option selected="true" disabled="disabled">Select option </option>
  <option value="Option A">Option A</option>
  <option value="Option B">Option B</option>
  <option value="Option C">Option C</option>
</select>
Siddharth Shukla
sumber
1

Jika Anda menggunakan jQuery untuk mengisi elemen pilihan Anda, Anda dapat menggunakan ini:

html

<select id="tagging"></select>

js

array_of_options = ['Choose Tagging', 'Option A', 'Option B', 'Option C']

$.each(array_of_options, function(i, item) {
    if(i==0) { sel_op = 'selected'; dis_op = 'disabled'; } else { sel_op = ''; dis_op = ''; }
    $('<option ' + sel_op + ' ' + dis_op + '/>').val(item).html(item).appendTo('#tagging');
  })

Ini akan memungkinkan pengguna untuk melihat opsi pertama sebagai judul yang dinonaktifkan ('Pilih Tagging'), dan pilih semua opsi lainnya.

masukkan deskripsi gambar di sini

Berhubung dgn sibernetika
sumber
0
            <select name="dept" id="dept">
                <option value =''disabled selected>Select Department</option>
                <option value="Computer">Computer</option>
                <option value="electronics">Electronics</option>
                <option value="aidt">AIDT</option>
                <option value="civil">Civil</option>
            </select>

gunakan "SELECTED" opsi mana yang ingin Anda pilih dengan defult. Terima kasih

Abdullah Mahi
sumber
Panduan ini sudah diposting pada pertanyaan ini di sini: stackoverflow.com/a/42997841/2943403 Jawaban Anda menambahkan tidak ada nilai baru ke halaman dan hanya berkontribusi ke halaman mengasapi.
mickmackusa
-1

Anda dapat mengatur opsi mana yang dipilih secara default seperti ini:

<option value="" selected>Choose Tagging</option>

Saya sarankan menggunakan javascript dan JQuery untuk mengamati acara klik dan menonaktifkan opsi pertama setelah yang lain dipilih: Pertama, berikan elemen ID seperti:

<select id="option_select" name="tagging">

dan opsi id:

<option value="" id="initial">Choose Tagging</option>

kemudian:

<script type="text/javascript">

$('option_select').observe(click, handleClickFunction);

Maka Anda cukup membuat fungsi:

function handleClickFunction () {

if ($('option_select').value !== "option_select") 
{
   $('initial').disabled=true; }
}

S_UMan
sumber