Açılır listede gösterilmeyecek varsayılan metin

Bir var selectbaşlangıçta gösteren seç dili Kullanıcı seçer bir dil kadar. Kullanıcı seçimi açtığında, gerçek bir seçenek olmadığı için bunun bir Dil seçin seçeneğini göstermesini istemiyorum .

Bunu nasıl başarabilirim?

Kyle'ın çözümü benim için mükemmel çalıştı, bu yüzden herhangi bir Js ve CSS'den kaçınmak için araştırmamı yaptım, ancak sadece HTML'ye bağlı kaldım. selectedBaşlık olarak görünmesini istediğimiz öğeye bir değer eklemek, onu ilk etapta yer tutucu olarak göstermeye zorlar. Gibi bir şey:

<option selected disabled>Choose here</option>

İşaretlemenin tamamı şu satırlar boyunca olmalıdır:

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

Bu kemana bir göz atabilirsin ve işte sonuç:

Eğer varsa yok seçin kutusunda bir kullanıcı tarafından tıklanıp kez seçeneklerinde listelenen görünür için yer tutucu metnin tür istediğiniz gibi eklemek hiddenşöyle niteliğ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>

Burada kemanı ve aşağıdaki ekran görüntüsünü kontrol edin .

İşte çözüm:

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

Doğru ve anlamsal yol, bir yer tutucu etiket seçeneği kullanmaktır :

• optionÖğenin ilk alt öğesi olarak bir öğe ekleyinselect
• Set Bunavalue= ""option
• Yer tutucu metni bunun içeriği olarak ayarlayın option
• Ekle requirediçin öznitelikselect

Bu formu göndermek edebilmek için başka bir seçenek seçmek için zorlar ve tarayıcılar gerektiğini haleoption istenen:

Bir seçme öğesi bir yer tutucu etiket seçeneği içeriyorsa, kullanıcı aracısının bu seçeneği, denetimin geçerli bir seçeneği yerine bunun bir etiket olduğunu aktaracak şekilde oluşturması beklenir.

Ancak çoğu tarayıcı bunu normal bir şekilde işleyecektir option. Bu nedenle, aşağıdakileri ekleyerek manuel olarak düzeltmemiz gerekecek option:

• selectedNitelik, bunu yapmak için seçilen varsayılan olarak
• disabledNiteliği, kullanıcı tarafından bu olmayan seçilebilir hale getirmek için
• display: none, değerler listesinden gizlemek için

select > .placeholder {
  display: none;
}

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

selectEtiketler için yer tutucu atamayı kullanamayacağınız için, saf HTML / CSS ile tam olarak istediğiniz şeyi yapmanın bir yolu olduğuna inanmıyorum. Ancak bunun gibi bir şey yapabilirsiniz:

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

Açılır menüde "Dil seçin" görünecektir, ancak başka bir seçenek belirlendikten sonra yeniden seçilmesi mümkün olmayacaktır.

Umarım bu yardımcı olur.

Bunu dene:

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

CSS'de:

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

Bir seçim yapılana kadar seçimin üzerinde görüntülenen aralığı olan bir çözümüm var. Aralık, varsayılan mesajı görüntüler ve bu nedenle, önermeler listesinde değildir:

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 (JQuery ile):

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

Demo için bir jsfiddle yaptım . Firefox ve IE8 ile test edilmiştir.

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

Elbette isterseniz css'i bir css dosyasına taşıyabilir escve devre dışı bırakılanı tekrar seçmek için düğmeyi yakalamak için bir komut dosyası koyabilirsiniz . Verdiğim diğer benzer cevapların aksine value="", bu, eğer seçilen listenizin değerlerini bir formla gönderirseniz, "bir şey seçti" içermeyecek. Asp.net mvc 5 içinde json ile derlenmiş var obj = { prop:$('#ddl').val(),...};ve JSON.stringify(obj);prop değeri null olacaktır.

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