Я подумал, что добавление атрибута "value"
в элементе < select >
ниже приведет к тому, что < option >
, содержащий мое предоставленное "value"
, будет выбрано по умолчанию:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
<select name="hall" id="hall" value="3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
& Лт;!- конец фрагмента - >
Однако это не сработало, как я ожидал. Как я могу установить, какой элемент < option >
выбран по умолчанию?
Установите selected = "selected"
для опции, которую вы хотите использовать по умолчанию.
<option selected="selected">
3
</option>
Если вы хотите, чтобы текст по умолчанию был своего рода заполнителем / подсказкой, но не считался допустимым значением (что-то вроде «завершено здесь», «выберите свою нацию» и т. Д.) Вы можете сделать что-то вроде этого:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
<select>
<option value="" 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>
& Лт;!- конец фрагмента - >
Полный пример:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
<select name="hall" id="hall">
<option>
1
</option>
<option>
2
</option>
<option selected>
3
</option>
<option>
4
</option>
<option>
5
</option>
</select>
& Лт;!- конец фрагмента - >
Я столкнулся с этим вопросом, но принятый и высоко оцененный ответ не сработал для меня. Оказывается, если вы используете React, то установка selected
не работает.
Вместо этого вы должны установить значение в теге < select >
, как показано ниже:
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
Узнайте больше о том, почему здесь на странице React.
Вы можете сделать это так:
<select name="hall" id="hall">
<option> 1 </option>
<option> 2 </option>
<option selected> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
Укажите «выбранное» ключевое слово в теге параметров, который вы хотите отобразить по умолчанию в раскрывающемся списке.
Или вы также можете предоставить атрибут тегу опции, т.е.
<option selected="selected">3</option>
если вы хотите использовать значения из формы и поддерживать ее динамически, попробуйте это с php
<form action="../<SamePage>/" method="post">
<?php
$selected = $_POST['select'];
?>
<select name="select" size="1">
<option <?php if($selected == '1'){echo("selected");}?>>1</option>
<option <?php if($selected == '2'){echo("selected");}?>>2</option>
</select>
</form>
Я предпочитаю это:
<select>
<option selected 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>
«Выбор здесь» исчезает после выбора опции.
Улучшение ответа nobita. Также вы можете улучшить визуальный просмотр выпадающего списка, скрыв элемент «Выберите здесь».
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
<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>
& Лт;!- конец фрагмента - >
Другой пример; используя JavaScript, чтобы установить выбранную опцию.
< select id = "yourDropDownElementId" > < select / >
// Get the select element
var select = document.getElementById("yourDropDownElementId");
// Create a new option element
var el = document.createElement("option");
// Add our value to the option
el.textContent = "Example Value";
el.value = "Example Value";
// Set the option to selected
el.selected = true;
// Add the new option element to the select element
select.appendChild(el);
Атрибут selected является логическим атрибутом.
При наличии указывается, что опция должна быть предварительно выбрана при загрузке страницы.
Предварительно выбранный параметр будет отображаться первым в раскрывающемся списке.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
Лучший способ на мой взгляд:
& Лт; select >
< option value = "" selected = "selected" hidden = "hidden" > Выберите здесь < / option >
< значение опции = "1" > One < / option >
< значение опции = "2" > два < / опция >
< значение опции = "3" > три < / опция >
< значение опции = "4" > четыре < / опция >
< значение опции = "5" > Five < / option >
& Лт; / select >
Почему не отключен?
Когда вы используете отключенный атрибут вместе с < button type = "reset" > Reset < / button >
значение не сбрасывается на исходный заполнитель. Вместо этого браузер выбирает первый не отключенный параметр, который может вызвать ошибки пользователя.
По умолчанию пустое значение
Каждая производственная форма имеет валидацию, тогда пустое значение не должно быть проблемой. Таким образом, мы можем иметь пустой не требуется выбирать.
Атрибуты синтаксиса XHTML
Синтаксис selected = "selected"
- единственный способ быть совместимым как с XHTML, так и с HTML 5. Это правильный синтаксис XML, и некоторые редакторы могут быть рады этому. Это более обратно совместимо. У меня нет сильных чувств по этому поводу, но если аргументы выше упоминания являются вашими требованиями, вы должны следовать полному синтаксису.
Если вы используете select с угловым значением 1, то вам нужно использовать ng-init, в противном случае второй параметр не будет выбран, поскольку ng-модель переопределяет выбранное значение defaul
<select ng-model="sortVar" ng-init='sortVar="stargazers_count"'>
<option value="name">Name</option>
<option selected="selected" value="stargazers_count">Stars</option>
<option value="language">Language</option>
</select>
Этот код устанавливает значение по умолчанию для элемента выбора HTML с PHP
<select name="hall" id="hall">
<?php
$default = 3;
$nr = 1;
while($nr < 10){
if($nr == $default){
echo "<option selected=\"selected\">". $nr ."</option>";
}
else{
echo "<option>". $nr ."</option>";
}
$nr++;
}
?>
</select>
Я использовал эту функцию php для генерации параметров и вставки их в свой HTML
<?php
# code to output a set of options for a numeric drop down list
# parameters: (start, end, step, format, default)
function numericoptions($start, $end, $step, $formatstring, $default)
{
$retstring = "";
for($i = $start; $i <= $end; $i = $i + $step)
{
$retstring = $retstring . '<OPTION ';
$retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"';
if($default == $i)
{
$retstring = $retstring . ' selected="selected"';
}
$retstring = $retstring . '>' . sprintf($formatstring,$i) . '</OPTION> ';
}
return $retstring;
}
?>
А потом в своем коде веб-страницы я использую его, как показано ниже ;
<select id="endmin" name="endmin">
<?php echo numericoptions(0,55,5,'%02d',$endmin); ?>
</select>
Если $ endmin создается из переменной _POST каждый раз, когда страница загружается (и этот код находится внутри формы, которая публикует), то ранее выбранное значение выбирается по умолчанию.
атрибут value < option > тег отсутствует, поэтому он не отображается в соответствии с выбранным пользователем. По умолчанию первый параметр отображается при загрузке раскрывающейся страницы, если атрибут value установлен на < option > тег.... Я решил свою проблему таким образом
Я просто сделаю значение первого параметра выбора по умолчанию и просто скрываю это значение в раскрывающемся списке с новой функцией HTML5 «скрытый». Нравится:
<select name="" id="">
<option hidden value="default">Select An Option</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
Я сам использую это
<select selected=''>
<option value=''></option>
<option value='1'>ccc</option>
<option value='2'>xxx</option>
<option value='3'>zzz</option>
<option value='4'>aaa</option>
<option value='5'>qqq</option>
<option value='6'>wwww</option>
</select>
Вам просто нужно поместить атрибут «выбранный» в определенный параметр, а не направлять его на элемент выбора.
Вот фрагмент для одного и нескольких рабочих примеров с разными значениями.
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
Select Option 3 :-
<select name="hall" id="hall">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
</select>
<br/>
<br/>
<br/>
Select Option 5 :-
<select name="hall" id="hall">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option selected="selected">5</option>
</select>
<br/>
<br/>
<br/>
Select Option 2 :-
<select name="hall" id="hall">
<option>1</option>
<option selected="selected">2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
& Лт;!- конец фрагмента - >