Текст за замовчуванням, який не відображатиметься у спадному списку

У мене є selectспочатку показ мови вибору, поки користувач не вибере мову. Коли користувач відкриває вибір, я не хочу, щоб він відображав варіант вибору мови , оскільки це не фактичний варіант.

Як я можу цього досягти?

Рішення Кайла для мене спрацювало чудово, тому я зробив свої дослідження, щоб уникнути будь-яких Js та CSS, а просто дотримуватися HTML. Додавання значення selectedелемента, яке ми хочемо відобразити як заголовка, змушує його відображатися в першу чергу як заповнювач. Щось на зразок:

<option selected disabled>Choose here</option>

Повна розмітка повинна відповідати цим рядкам:

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

Ви можете подивитися на цю загадку , і ось результат:

Якщо ви не хочете, щоб текст тексту заповнення відображався у списку в параметрах, як тільки користувач натискає на поле вибору, просто додайте такий hiddenатрибут:

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

Ознайомтесь зі скрипкою та скріншотом нижче.

Ось рішення:

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

Правильний та семантичний спосіб - це використання опції мітки заповнення :

• Додайте optionелемент як перший дочірникselect
• Встановіть цеvalue= ""option
• Встановіть текст заповнення як вміст цього option
• Додайте requiredатрибут доselect

Це змусить користувача вибрати інший варіант для того , щоб мати можливість представити форму, і браузери повинні надаватиoption за бажанням:

Якщо елемент вибору містить опцію мітки заповнення заповнення, очікується, що агент користувача виведе цю опцію таким чином, що передає, що це мітка, а не допустима опція елемента керування.

Однак більшість браузерів вважають це нормальним явищем option. Тож нам доведеться це виправити вручну, додавши до цього option:

• selectedАтрибут, щоб зробити його обраний за замовчуванням
• disabledАтрибут, щоб зробити його не обирали користувачем
• display: none, щоб приховати це зі списку значень

select > .placeholder {
  display: none;
}

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

Оскільки ви не можете використовувати присвоєння заповнювачів для selectтегів, я не вірю, що існує якийсь спосіб зробити саме те, що ви просите, за допомогою чистого HTML / CSS. Однак ви можете зробити щось подібне:

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

"Вибрати мову" відобразиться у спадному меню, але після вибору іншого варіанту його повторний вибір не вдасться.

Я сподіваюся, що це допомагає.

Спробуйте це:

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

У CSS:

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

У мене є рішення із прольотом, що відображається над вибраним, доки не буде зроблено вибір. Проміжок відображає повідомлення за замовчуванням, тому його немає в списку пропозицій:

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

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

Я зробив jsfiddle для демонстрації . Тестували з Firefox та IE8.

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

Ви можете, звичайно, перемістити css у файл css, якщо хочете, і поставити скрипт, щоб схопити escкнопку, щоб знову вибрати інвалід. На відміну від інших подібних відповідей, які я викладаю value="", це так, якщо ви надсилаєте значення (-и) свого списку вибору у формі, воно не буде містити "щось вибране". У asp.net mvc 5, надісланий як компільований json, var obj = { prop:$('#ddl').val(),...};а JSON.stringify(obj);значення опори буде нульовим.

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