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>

另一个例子；使用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>的问题是，它有时与当前渲染的状态断开连接，除非选项列表中发生了更改，否则不会返回更改值。当试图从列表中选择第一个选项时，这可能是一个问题。下面的代码可以获得第一次选择的第一个选项，但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>

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

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>