我认为在下面的<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>元素?
当前回答
我使用这个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(并且此代码位于发布的表单中),则默认情况下会选择先前选择的值。
其他回答
默认选定值为选项-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>
您可以使用:
<option value="someValue" selected>Some Value</option>
而不是
<option value="someValue" selected = "selected">Some Value</option>
两者同样正确。
我认为最好的方法是:
<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遵从性很重要,则应遵循完整的语法。
每个选项中都需要一个“id”属性,此解决方案才能正常工作:
<脚本>函数select_option(id,value_selected){var选择;select=document.getElementById(id);如果(select==null)返回0;var选项;option=select.options.namedItem(value_selected);if(option==null)返回0;option.selected=“已选择”;返回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></选择><script>select_option(“大厅”,“3”)</脚本>
函数首先尝试查找id为的<select>,然后在<select>选项中搜索value_selected,如果找到它,则将所选属性设置为true。否则为False
这些答案对我来说都不起作用,原因是我的数据库中有一个数组,其中包含以前的选择,我希望用户在更改之前看到高亮显示上次所做的选择。我也在使用不喜欢所选标签的React。
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所在的.current属性。通过在html行中添加带有标记select的ref=,可以实现这一点。
这里是useEffect代码,对于那些不使用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返回中的HTML部分:
<select
name="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>