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

42
Вам не нужно ставить значения trueили disabled. Вы можете получить, делая<option selected disabled>Choose Tagging</option>
Сэм Итон

18
@ SamEaton, он просто заставляет код следовать действующему синтаксису XHTML, иначе в HTML5 вы можете его игнорировать.
Крис

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


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>

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


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 для заполнения элемента 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; }
}

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.