我认为在下面的<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>元素?
当前回答
我只需将第一个选择选项值设置为默认值,然后使用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>
其他回答
如果您想使用表单中的值并保持其动态,请尝试使用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>
另一个例子;使用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>
<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”>一起使用时,重置</button>值不会重置为原始占位符。相反,浏览器选择第一个未禁用选项,这可能会导致用户错误。
默认空值
每个生产表单都有验证,那么空值应该不是问题。这样我们可能会有空的不需要的选择。
XHTML语法属性
selected=“selected”语法是兼容XHTML和HTML5的唯一方法。这是正确的XML语法,一些编辑可能对此感到高兴。它更向后兼容。如果XML遵从性很重要,则应遵循完整的语法。
我使用这个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>
如果每次加载页面时都从_POST变量创建$endmin(并且此代码位于发布的表单中),则默认情况下会选择先前选择的值。
完整示例:
<select name=“hall”id=“hall”><option>1</option><option>2</option><option selected>3</option><选项>4</选项><选项>5</选项></选择>