Я думал, что добавление атрибута "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>Установите 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> Я столкнулся с этим вопросом, но принятый и очень высокий ответ не сработал у меня. Оказывается, если вы используете React, то установка selected не работает.
Вместо этого вам нужно установить значение в теге <select>, как показано ниже:
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</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>
если вы хотите использовать значения из формы и держать ее динамической, попробуйте это с помощью 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);
Атрибут 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">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>
Почему не отключен?
При использовании атрибута disabled вместе с <button type="reset">Reset</button> значение не сбрасывается в исходный заполнитель. Вместо этого браузер выбирает сначала не отключенную опцию, которая может вызвать ошибки пользователя.
Пустое значение по умолчанию
Каждая производственная форма имеет проверку, тогда пустое значение не должно быть проблемой. Таким образом, у нас может быть пустой выбор не требуется.
Атрибуты синтаксиса XHTML
Синтаксис selected="selected" - это единственный способ совместимости с XHTML и HTML 5. Это правильный синтаксис XML, и некоторые редакторы могут быть рады этому. Это более обратно совместимо. У меня нет сильного чувства по этому поводу, но если вышеупомянутые аргументы являются вашими требованиями, вы должны следовать полному синтаксису.
Если вы вступаете в реакцию, вы можете использовать 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>
Я использовал эту функцию 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 каждый раз, когда страница загружается (и этот код находится внутри формы, в которой размещаются сообщения), то по умолчанию выбрано ранее выбранное значение.
Этот код устанавливает значение по умолчанию для элемента 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>
атрибут значения тега отсутствует, поэтому он не отображается как выбранный вами. По умолчанию первый параметр отображается при загрузке выпадающей страницы, если атрибут value установлен в теге.... Я решил эту проблему таким образом
Вы можете использовать:
<option value="someValue" selected>Some Value</option>
вместо,
<option value="someValue" selected = "selected">Some 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>
Проблема с <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>
Вам просто нужно поставить атрибут "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>Вот как я это сделал...
<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>
Я использую Angular, и я установил опцию по умолчанию
HTML-шаблон
<select #selectConnection [(ngModel)]="selectedVal" class="form-control col-sm-6 " max-width="100px" title="Select"
data-size="10">
<option >test1</option>
<option >test2</option>
</select>
Сценарий:
sselectedVal:any="test1";