我认为在下面的<select>元素上添加一个“value”属性集会导致默认选择包含我提供的“value”的<option>:
<select name=“hall”id=“hall”value=“3”><option>1</option><option>2</option><option>3</option><选项>4</选项><选项>5</选项></选择>
然而,这并没有像我预期的那样奏效。我如何设置默认选择哪个<option>元素?
我认为在下面的<select>元素上添加一个“value”属性集会导致默认选择包含我提供的“value”的<option>:
<select name=“hall”id=“hall”value=“3”><option>1</option><option>2</option><option>3</option><选项>4</选项><选项>5</选项></选择>
然而,这并没有像我预期的那样奏效。我如何设置默认选择哪个<option>元素?
当前回答
你可以这样做:
<select name="hall" id="hall">
<option> 1 </option>
<option> 2 </option>
<option selected> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
在选项标记中提供“selected”关键字,默认情况下,该关键字将显示在下拉列表中。
或者您也可以为选项标签提供属性,即。
<option selected="selected">3</option>
其他回答
另一个例子;使用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);
你可以这样做:
<select name="hall" id="hall">
<option> 1 </option>
<option> 2 </option>
<option selected> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
在选项标记中提供“selected”关键字,默认情况下,该关键字将显示在下拉列表中。
或者您也可以为选项标签提供属性,即。
<option selected="selected">3</option>
我使用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";
如果您希望将默认文本作为占位符/提示,但不认为它是有效值(例如“此处完成”、“选择您的国家”ecc),您可以执行以下操作:
<选择><option value=“”selected disabled hidden>选择此处</option><option value=“1”>一个</option><option value=“2”>两个</option><option value=“3”>三个</option><option value=“4”>四个</option><option value=“5”>五个</option></选择>
我遇到了这个问题,但这个被接受的、高度支持的答案对我来说不起作用。事实证明,如果你使用的是React,那么设置selected就不起作用了。
相反,您必须直接在<select>标记中设置一个值,如下所示:
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
在React页面上阅读更多关于原因的信息。