Как показать отключить опцию выбора 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>

Но теперь «Вариант А» стал стандартным. Поэтому я хочу установить «Выбрать теги» по умолчанию, а также отключить его от выбора. Это способ сделать это. То же самое нужно сделать с другим select, который будет извлекать данные из Mysql. Любое предложение будет заметно.

Анкит Шарма
источник
Как насчет добавления события клика на выбор, чтобы отключить первый вариант.
Дэвид Кузнец
Вы должны исправить синтаксическую ошибку - value = "" disabled "должно быть отключено =" отключено "+ удалить нечетные закрывающие теги </ select>
Евгений
@Evgeniy упс, что </ select> принадлежит другой части моего кода
Ankit Sharma
@AnkitSharma я отредактировал твой код - у тебя было </ select> <select> <option> ... <option> </ select>
Евгений
@Evgeniy thanx ..... </ select> скопирован из моего кода по ошибке.
Анкит Шарма

Ответы:

291

использование

<option selected="true" disabled="disabled">Choose Tagging</option>    
Cris
источник
42
Вам не нужно ставить значения trueили disabled. Вы можете получить, делая<option selected disabled>Choose Tagging</option>
Сэм Итон
18
@ SamEaton, он просто заставляет код следовать действующему синтаксису XHTML, иначе в HTML5 вы можете его игнорировать.
Крис
1
Вам следует установить значение = "", поэтому, если вы также потребовали, возникнет ошибка выбора из выпадающего списка, в противном случае пустое значение будет пропущено, даже если ничего не было выбрано. <option selected="true" disabled="disabled" value="">Choose Tagging</option>
user34612
27

В HTML5, чтобы выбрать отключенную опцию:

<option selected disabled>Choose Tagging</option>
Прадип Кумар Прабахаран
источник
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
Это не работает, OP должен быть выбран по умолчанию 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>

Это не отменяет его, но вы можете скрыть его в настройках, пока оно отображается по умолчанию.

Thielicious
источник
6

Еще одно решение для тегов SELECT для тех, кто хочет оставить первый параметр пустым.

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

c0degeas
источник
3
 selected disabled="true"

Использовать это. Это будет работать в новых браузерах

Ронак Бокария
источник
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 для заполнения элемента select, вы можете использовать это:

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 для наблюдения за событием click и отключить первый параметр после выбора другого: сначала присвойте элементу идентификатор, например, так:

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

и вариант идентификатор:

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

S_UMan
источник