如何设置超文本标记语言<选择>元素的默认值？

完整示例：

<select name="hall" id="hall"><option>1</option><option>2</option><option selected>3</option><option>4</option><option>5</option></select> 

为您希望成为默认值的选项设置selected="selected"。

<option selected="selected">3</option>

你可以这样做：

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

另一个例子；使用JavaScript设置选定的选项。

（您可以使用此示例将值数组循环到下拉组件中）

<select id="yourDropDownElementId"><select/>

// Get the select elementvar select = document.getElementById("yourDropDownElementId");// Create a new option elementvar el = document.createElement("option");// Add our value to the optionel.textContent = "Example Value";el.value = "Example Value";// Set the option to selectedel.selected = true;// Add the new option element to the select elementselect.appendChild(el);

如果你想使用一个表单的值并保持它的动态，可以用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>

我就是这么做的…

<form action="../<SamePage>/" method="post">
<?phpif ( $_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>

选择属性是一个布尔属性。

当存在时，它指定在页面加载时应预先选择一个选项。

预选的选项将首先显示在下拉列表中。

<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="vw">VW</option><option value="audi" selected>Audi</option></select>

我使用这个php函数来生成选项，并将其插入到我的超文本标记语言中

<?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>

如果每次加载页面时都从_POST变量创建$endmin（并且此代码位于发布的表单中），则默认选择先前选择的值。

此代码使用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>

我遇到了这个问题，但是被接受和高度赞同的答案对我不起作用。事实证明，如果你使用的是React，那么设置selected不起作用。

相反，您必须直接在<select>标记中设置一个值，如下所示：

<select value="B"><option value="A">Apple</option><option value="B">Banana</option><option value="C">Cranberry</option></select>

阅读更多关于为什么在React页面上

如果你想有一个默认文本作为占位符/提示，但不被认为是一个有效的值（比如“在这里完成”，“选择你的国家”等等），你可以这样做：

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

标签的value属性缺失，因此它不会显示为您希望选择的。默认情况下，如果在标签上设置了value属性，则在下拉页面加载时显示第一个选项……我通过这种方式解决了我的问题

对大雄答案的改进。您还可以通过隐藏元素“选择此处”来改进下拉列表的视觉视图。

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

我自己用的

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

“选择此处”在选择选项后消失。

如果您使用的是选择角1，那么您需要使用ng-init，否则，第二个选项将不会被选中，因为ng-model覆盖了deaul选定值

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

如果你在React中，你可以使用defaultValue作为属性，而不是选择标签中的value。

您可以使用：

<option value="someValue" selected>Some Value</option>

而不是，

<option value="someValue" selected = "selected">Some Value</option>

两者同样正确。

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

我只需将第一个选择选项值设为默认值，并使用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 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>

我认为最好的方法：

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

为什么不残疾？

当您将禁用属性与<button type="reset">Reset</button>值一起使用时，不会重置为原始占位符。相反，浏览器选择第一个未禁用选项，这可能会导致用户错误。

默认空值

每个生产表单都有验证，那么空值应该不是问题。这样我们可能有空的不需要选择。

XHTML语法属性

selected="selected"语法是与XHTML和超文本标记语言5兼容的唯一方法。它是正确的XML语法，一些编辑器可能对此感到高兴。它更向下兼容。如果XML合规性很重要，您应该遵循完整的语法。

我使用Angular并设置默认选项

超文本标记语言模板

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

你可以试试这样

  <select name="hall" id="hall"><option>1</option><option>2</option><option selected="selected">3</option><option>4</option><option>5</option></select>

此示例已经过测试，可以处理页面上的多个<select>元素，也可以处理普通文本元素。它还没有经过测试，可以在<select multiple="true">时将值设置为多个选择，但是您可能可以修改此示例以支持这一点。

• 为每个<select>元素添加一个属性data-selected，并将值设置为您希望选择的选项的值。

• 使用JavaScript的querySelectorAll()选择所有具有您刚刚添加的自定义属性的元素。

在下面的示例中，当运行时，第一个<select>应该显示值user为选定的选项，第二个<select>应该显示值admin为选定的选项。

document.querySelectorAll('[data-selected]').forEach(e => {e.value = e.dataset.selected});

<select data-selected="user" class="form-control" name="role"><option value="public">Pubblica</option><option value="user">Utenti</option><option value="admin">Admin</option></select>

<select data-selected="admin" class="form-control" name="role2"><option value="public">Pubblica</option><option value="user">Utenti</option><option value="admin">Admin</option></select>

设置选择=“选择”，其中选项值为3

请看下面的例子

<option selected="selected" value="3" >3</option>

Upstream System:<select name=upstream id=upstream><option value="SYBASE">SYBASE ASE<option value="SYBASE_IQ">SYBASE_IQ<option value="SQLSERVER">SQLSERVER</select><script>var obj=document.getElementById("upstream");for (var i=0;i<obj.length;i++){if(obj.options[i].value==="SYBASE_IQ")obj.selectedIndex=i;}</script>

要使用PHP和JavaScript设置默认值：

State: <select id="State"><option value="" selected disabled hidden></option><option value="Andhra Pradesh">Andhra Pradesh</option><option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>..<option value="West Bengal">West Bengal</option></select><?phpif(isset($_GET['State'])){echo <<<heredoc<script>document.getElementById("State").querySelector('option[value="{$_GET['State']}"]').selected = true;</script>heredoc;}?>

默认选择值为选项-4

  <html:select property="status" value="OPTION_4" styleClass="form-control"><html:option value="">Select</html:option><html:option value="OPTION_1"  >Option-1</html:option><html:option value="OPTION_2"  >Option-2</html:option><html:option value="OPTION_3"  >Option-3</html:option><html:option value="OPTION_4"  >Option-4</html:option><html:option value="OPTION_5"  >Option-5</html:option></html:select>

您需要在每个选项中使用“id”属性才能使此解决方案正常工作：

<script>function select_option (id,value_selected) {
var select;select = document.getElementById(id);if (select == null) return 0; 
var option;option = select.options.namedItem(value_selected);if (option == null) return 0;
option.selected = "selected";return true;}</script>
<select name="hall" id="hall"><option id="1">1</option><option id="2">2</option><option id="3">3</option><option id="4">4</option><option id="5">5</option></select><script>select_option ("hall","3");</script> 

该函数首先尝试使用id查找<选择>，然后它将在<选择>选项中搜索value_selected，如果找到它，它将设置选择属性返回true。否则为false

这是选择默认选项的简单方法。

可用于超文本标记语言页面上的多个选择。

方法：

• 找到每一个选择
• 读取该选择的id和值
• 使选项被选中

备注：

• 每个选择都必须有ID以避免冲突

$(document).ready(function() {// Loop for every select in page$('select').each(function(index, id) {// Get the valuevar theValue = $(this).attr('value');
// Get the IDvar theID = $(this).attr('id');
// Make option selected$('select#' + theID + ' option[value=' + theValue + ']').attr('selected', true);});});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select id="sport" name="sport" class="autoselect" value="golf"><option value="basket">Basket Ball</option><option value="tennis">Tennis</option><option value="golf">Golf</option><option value="bowling">Bowling</option></select>
<hr>
<select id="tools" name="tools" class="autoselect" value="saw"><option value="hammer">Hammer</option><option value="drill">Drill</option><option value="screwdriver">Screwdriver</option><option value="saw">Saw</option><option value="wrench">Wrench</option></select>

我遇到了一些麻烦，因为我需要一些方法来根据我在数据库中的值动态选择选项。下面的脚本对我来说很有魅力：

<?php//pick the value of database$selected_sexo = $query['s_sexo'];?>
<select name="s_sexo" id="s_sexo" required><option <?php if($selected_sexo == 'M'){echo("selected");}?> value="M">M</option><option <?php if($selected_sexo == 'F'){echo("selected");}?> value="F">F</option></select>

失败者在这种情况下是不友好的

这些答案都不适合我，原因是我的数据库中有一个包含先前选择的数组，我希望用户在更改它们之前看到突出显示的他上次所做的相同选择。

VM71 react_devtools_backend.js:3973 Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>

因此，我决定直接操作docref.options。在React中，您必须使用useRef钩子来执行此操作，因此您将看到存储实际Ref的.当前属性。您可以通过在html行中添加带有标记选择的ref=来实现这一点。

这是useEffects代码，对于那些不使用React的人来说，只需将代码从钩子中取出，React每次渲染组件时都会执行此代码。

    useEffect(() => {if(optionRef?.current!==undefined) { // only do something when optionRef has been assigned a doc reference by React[...optionRef.current.options]?.filter(option => option.value === optionTypes?.filter(type => type===option.value)[0])?.map(option=> option.selected=true)// because optionTypes is an array of strings, due to using multiple selection, in my case only one match is possible, thus just convert the first and only string of the resulting array to string with the [0]// this one liner is all that you need if not using react, I only tested it in React}}) // I am making it trigger every time it renders, couldn't make it work when tracking optionRef changes or optionRef.current changes, it wouldn't trigger despite the change of optionRef. To make it work I'd probable have to change a state variable every time that optionRef changes, so I decided to just execute this code for every render

超文本标记语言部分在React中返回：

<selectname="optionType"id="idNumber"ref={optionRef}multiple={true}size={3}> {/* determines the number of elements that will fit into the selection window*/}<option value="" disabled hidden>Choose Option</option><option value="Option1">Option1</option></select>