我认为在下面的<select>元素上添加一个“value”属性集会导致默认选择包含我提供的“value”的<option>:

<select name=“hall”id=“hall”value=“3”><option>1</option><option>2</option><option>3</option><选项>4</选项><选项>5</选项></选择>

然而,这并没有像我预期的那样奏效。我如何设置默认选择哪个<option>元素?


当前回答

您可以使用:

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

而不是

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

两者同样正确。

其他回答

我就是这样做的。。。

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

我遇到了这个问题,但这个被接受的、高度支持的答案对我来说不起作用。事实证明,如果你使用的是React,那么设置selected就不起作用了。

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

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

在React页面上阅读更多关于原因的信息。

如果将select与angular 1一起使用,则需要使用nginit,否则,将不会选择第二个选项,因为ng-model会覆盖默认的选定值

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

所选属性是布尔属性。

如果存在,它指定在加载页面时应预先选择一个选项。

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

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

这些答案对我来说都不起作用,原因是我的数据库中有一个数组,其中包含以前的选择,我希望用户在更改之前看到高亮显示上次所做的选择。我也在使用不喜欢所选标签的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>