Teks default yang tidak akan ditampilkan dalam daftar drop-down

Saya memiliki selectyang awalnya menampilkan Pilih bahasa sampai pengguna memilih bahasa. Saat pengguna membuka pilihan, saya tidak ingin menampilkan opsi Pilih bahasa , karena ini bukan opsi yang sebenarnya.

Bagaimana saya bisa mencapai ini?

Solusi Kyle bekerja dengan sangat baik untuk saya jadi saya melakukan penelitian untuk menghindari Js dan CSS, tetapi hanya bertahan dengan HTML. Menambahkan nilai selectedke item yang ingin kita munculkan sebagai tajuk memaksanya untuk tampil di tempat pertama sebagai placeholder. Sesuatu seperti:

<option selected disabled>Choose here</option>

Markup lengkap harus berada di sepanjang garis ini:

<select>
    <option selected disabled>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>

Anda bisa melihat biola ini , dan inilah hasilnya:

Jika Anda tidak ingin jenis teks tempat penampung muncul tercantum dalam opsi setelah pengguna mengklik kotak pilih cukup tambahkan hiddenatribut seperti ini:

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

Periksa biola di sini dan tangkapan layar di bawah.

Inilah solusinya:

<select>
    <option style="display:none;" selected>Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Cara yang tepat dan semantik adalah menggunakan opsi label placeholder :

• Tambahkan optionelemen sebagai anak pertama dariselect
• Setel ituvalue= ""option
• Atur teks placeholder sebagai isinya option
• Tambahkan requiredatribut keselect

Hal ini akan memaksa pengguna untuk memilih pilihan lain agar dapat mengirimkan formulir, dan browser harus membuat yang optionseperti yang diinginkan:

Jika elemen pilihan berisi opsi label placeholder, agen pengguna diharapkan untuk merender opsi tersebut dengan cara yang menunjukkan bahwa itu adalah label, bukan opsi kontrol yang valid.

Namun, sebagian besar browser akan membuatnya seperti biasa option. Jadi kita harus memperbaikinya secara manual, dengan menambahkan yang berikut ini ke option:

• The selectedatribut, untuk membuatnya dipilih secara default
• The disabledatribut, untuk membuatnya non-dipilih oleh pengguna
• display: none, untuk menyembunyikannya dari daftar nilai

select > .placeholder {
  display: none;
}

<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Karena Anda tidak dapat menggunakan placeholder tetapkan untuk selecttag, saya tidak percaya bahwa ada cara untuk melakukan apa yang Anda minta dengan HTML / CSS murni. Namun, Anda dapat melakukan sesuatu seperti ini:

<select>
  <option disabled="disabled">Select language</option>
  <option>Option 1</option>
</select>

"Pilih bahasa" akan muncul di tarik-turun, tetapi setelah opsi lain dipilih, Anda tidak dapat memilihnya kembali.

Saya harap itu membantu.

Coba ini:

<div class="selectSelection">
    <select>
        <option>Do not display</option>
        <option>1</option>
        <option>1</option>
    </select>
</div>

Di CSS:

.selectSelection option:first-child{
    display:none;
}

Saya punya solusi dengan rentang yang ditampilkan di atas pilih sampai seleksi selesai. Span menampilkan pesan default, sehingga tidak ada dalam daftar proposisi:

HTML:

<span id="default_message_overlay">Default message</span>
<select id="my_select">
    <option value="1">Option 1</option>  
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

CSS:

#default_message_overlay {
    position: absolute;
    display: block;
    width: 120px;
    color: grey;
}
select {
    width: 150px;
}

Javascript (dengan JQuery):

$(document).ready(function() {
    // No selection at start
    $('#my_select').prop("selectedIndex", -1);

    // Set the position of the overlay
    var offset = $('#my_select').offset();
    offset.top += 3;
    offset.left += 3;
    $('#default_message_overlay').offset(offset);

    // Remove the overlay when selection changes
    $('#my_select').change(function() {
        if ($(this).prop("selectedIndex") != -1) {
            $('#default_message_overlay').hide();
        }
    });
});

Saya telah membuat jsfiddle untuk demo . Diuji dengan Firefox dan IE8.

<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>

Anda tentu saja dapat memindahkan css ke file css jika Anda mau, dan meletakkan skrip untuk menangkap esctombol untuk memilih yang dinonaktifkan lagi. Berbeda dengan jawaban serupa lainnya yang saya masukkan value="", ini jadi jika Anda mengirim nilai daftar pilihan Anda dengan formulir, itu tidak akan berisi "memilih sesuatu". Dalam asp.net mvc 5 dikirim sebagai json yang dikompilasi dengan var obj = { prop:$('#ddl').val(),...};dan JSON.stringify(obj);nilai prop akan menjadi null.

Op1:

$("#MySelectid option").each(function () {
        if ($(this).html() == "text to find") {
            $(this).attr("selected", "selected");
            return;
        }
});

Op2:

$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; })​​​​​​​​.attr('selected','selected');​​​​​​​