Я думал, что добавление атрибута "value"
установленного в элементе <select>
ниже, приведет к тому, что <option>
содержащий предоставленное мной "value"
будет выбран по умолчанию:
<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>
Если вы хотите, чтобы текст по умолчанию был своего рода заполнитель/подсказкой, но не считался допустимым значением (что-то вроде "complete here", "select your nation" ecc.) вы можете сделать что-то вроде этого:
<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>
Полный пример:
<select name="hall" id="hall">
<option>
1
</option>
<option>
2
</option>
<option selected>
3
</option>
<option>
4
</option>
<option>
5
</option>
</select>
Вы можете сделать это следующим образом:
<select name="hall" id="hall">
<option> 1 </option>
<option> 2 </option>
<option selected> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
Предоставьте "выбранное" ключевое слово внутри тега параметра, который вы хотите по умолчанию указывать в раскрывающемся списке.
Или вы также можете указать атрибут тега опции i.e.
<option selected="selected">3</option>
selected="false"
недопустимо, а selected=""
также делает его выделенным. Единственный способ сделать опции не выбранными - это удалить атрибут. w3.org/html/wg/drafts/html/master/...
Я столкнулся с этим вопросом, но принятый и очень высокий ответ не сработал у меня. Оказывается, если вы используете React, то установка selected
не работает.
Вместо этого вам нужно установить значение в теге <select>
, как показано ниже:
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
Узнайте больше о том, почему здесь, на странице "Реагирование" .
value
для <select>
, то есть <select value="3">
, но он недопустим в валидаторе W3C.
если вы хотите использовать значения из формы и держать ее динамической, попробуйте это с помощью 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>
'Choose here' исчезает после выбора опции.
Улучшение для nobita ответа. Также вы можете улучшить визуальный вид выпадающего списка, спрятав элемент "Choose here".
<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);
el.selected = "selected";
соответствовать стандарту w3?
selected
является логическим свойством, определенным в w3c - w3.org/TR/html401/interact/forms.html `17.6.1 Выбранные предварительно выбранные параметры [CI] - если установлено, этот логический атрибут указывает, что этот параметр предварительно выбран. Для получения дополнительной информации об использовании см. w3chools - w3schools.com/jsref/prop_option_selected.asp
Атрибут selected - это логический атрибут.
При наличии, он указывает, что опция должна быть предварительно выбрана при загрузке страницы.
Предварительно выбранная опция будет отображаться сначала в раскрывающемся списке.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
Если вы вступаете в реакцию, вы можете использовать defaultValue
как атрибут вместо value
в теге select.
Если вы используете select с angular 1, вам нужно использовать ng-init, иначе второй вариант не будет выбран, поскольку ng-model переопределяет выбранное значение 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>
атрибут значения тега отсутствует, поэтому он не отображается как выбранный вами. По умолчанию первый параметр отображается при загрузке выпадающей страницы, если атрибут value установлен в теге.... Я решил эту проблему таким образом
Этот код устанавливает значение по умолчанию для элемента 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 каждый раз, когда страница загружается (и этот код находится внутри формы, в которой размещаются сообщения), то по умолчанию выбрано ранее выбранное значение.
Вы можете использовать:
<option value="someValue" selected>Some Value</option>
вместо,
<option value="someValue" selected = "selected">Some Value</option>
оба одинаково правильны.
Я сам использую его
<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>
Вам просто нужно поставить атрибут "selected" на конкретную опцию, вместо того, чтобы напрямую выбирать элемент.
Вот фрагмент для одного и нескольких рабочих примеров с разными значениями.
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>
Я просто сделал бы значение первого параметра выбора значением по умолчанию и просто скрыл это значение в раскрывающемся списке с новой скрытой функцией 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>
заключается в том, что она иногда отключается от состояния того, что в настоящее время отображается, и если что-то не изменилось в списке опций, значение изменения не возвращается. Это может быть проблемой при попытке выбрать первый вариант из списка. Следующий код может получить первый вариант, который был выбран в первый раз, но onchange="changeFontSize(this)"
по своему "я" не стал бы. Существуют методы, описанные выше, с использованием фиктивной опции, чтобы заставить пользователя сделать значение изменения для получения фактического первого значения, например, начать список с пустым значением. Примечание: onclick будет вызывать функцию дважды, следующий код не будет, но решает первую проблему.
<label>Font Size</label>
<select name="fontSize" id="fontSize" onfocus="changeFontSize(this)" onchange="changeFontSize(this)">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extraLarge">Extra large</option>
</select>
<script>
function changeFontSize(x){
body=document.getElementById('body');
if (x.value=="extraLarge") {
body.style.fontSize="25px";
} else {
body.style.fontSize=x.value;
}
}
</script>
Вот как я это сделал...
<form action="../<SamePage>/" method="post">
<?php
if ( $_POST['drop_down'] == "")
{
$selected = "";
}
else
{
$selected = "selected";
}
?>
<select name="select" size="1">
<option value="1" <?php $selected ?>>One</option>
//////// OR ////////
<option value="2" $selected>Two</option>
</select>
</form>