Як показувати опцію вимкнення HTML-вимкнення за замовчуванням?


139

Я новачок у HTML та PHP і хочу створити спадне меню з таблиці mysql і також жорстко закодований. У мене є кілька варіантів вибору на своїй сторінці, одна з них є

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

Проблема полягає в тому, що користувач також може вибрати "Вибрати тег" як своє тегування, але я хочу лише надати йому вибір із трьох доступних. Я використав відключення як

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

Але тепер "Варіант А" став типовим. Тому я хочу встановити "Вибрати тег" як за замовчуванням, а також хочу відключити його від вибору. Це спосіб це зробити. Те ж саме потрібно зробити і з іншим вибором, який отримає дані з Mysql. Будь-яка пропозиція буде помітна.


як щодо додавання події клацання у вибраному, щоб відключити перший параметр.
Девід Блексміт

Ви маєте виправити синтаксичну помилку - value = "" disabled treba бути відключено = "відключено" + видалити непарні закриття </select> теги
Євгеній

@Evgeniy ой, що </select> належить іншій частині мого коду
Ankit Sharma

@AnkitSharma я редагував ваш код - у вас був </select><select> <option> ... <option> </select>
Євген

@Evgeniy thanx ..... </select> помилково скопіювали з мого коду.
Ankit Sharma

Відповіді:


291

використання

<option selected="true" disabled="disabled">Choose Tagging</option>    

42
Вам не потрібно ставити значення trueабо disabledзначення. ви можете дістатися<option selected disabled>Choose Tagging</option>
Сем Етон

18
@ SamEaton, він просто змушує код слідувати дійсному синтаксису XHTML, інакше в HTML5 ви можете нехтувати цим.
Крис

1
Ви повинні встановити значення = "", тому якщо ви також вимагаєте, тоді буде виведена помилка, щоб вибрати з випадаючого меню, інакше порожнє значення буде передано, хоча нічого не було вибрано. <option selected="true" disabled="disabled" value="">Choose Tagging</option>
користувач34612


10

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

Використовуйте тег optgroup , наприклад:

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

3
Це не працює, ОП потрібно, щоб його було обрано за замовчуванням jsfiddle.net/tomsihap/5xm7grnb
tomsihap

10

Electron + React Нехай ваші два перші варіанти будуть такими

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

Перший для відображення, коли він закритий, Другий для відображення, коли список відкриється


8

Використовуйте hidden.

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

Це не скидає його, але ви можете приховати його в параметрах, поки він відображається за замовчуванням.


6

Ще одне рішення тегів SELECT для тих, хто хоче залишити перший варіант порожнім.

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



3

ми можемо відключити використання цієї методики.

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

1

Якщо ви використовуєте jQuery для заповнення вибраного елемента, ви можете використовувати це:

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

Це дозволить користувачеві побачити першу опцію як відключений заголовок ("Вибрати тег"), а також вибрати всі інші параметри.

введіть тут опис зображення


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>

використовуйте "ВИБІРАНО", який варіант ви хочете вибрати за замовчуванням. Дякую


Це керівництво вже було розміщено з цього питання тут: stackoverflow.com/a/42997841/2943403 Ваша відповідь не додає нової цінності для сторінки та сприяє лише розширенню сторінки.
mickmackusa

-1

Ви можете встановити, який варіант обраний за замовчуванням, як це:

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

Я б запропонував використовувати javascript та JQuery для спостереження за подіями клацання та відключення першого варіанту після того, як було обрано інше: Спочатку дайте елементу такий ідентифікатор:

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

і опція id:

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

тоді:

<script type="text/javascript">

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

Тоді ви просто створите функцію:

function handleClickFunction () {

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.