动态更改默认选择的选项答案

【问题标题】：Change default selected option dynamically动态更改默认选择的选项
【发布时间】：2021-12-24 16:17:51
【问题描述】：

在 HTML 选择元素中更改默认选择选项的方法是什么？我希望我能以某种方式将它与用户进入网站时触发的 javascript 函数结合起来。

例如，如果有以下表示一年的前四个月（1=1 月，2=2 月等），在示例中，1 将始终是默认选择值。但是如果当前月份为2 (=Feb)，则可以将默认值设置为2？

我大概可以使用moment.js 库获取当前时间，但是可以动态更改所选值吗？

<body>
    <select id="month", onchange="setMonth();">
        <option value='1' selected>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
    </select>

    <script>
        var monthValue = month.options[month.selectedIndex].value.padStart(2, '0');

        function setMonth() {
            monthValue = month.options[month.selectedIndex].value.padStart(2, '0');
        }
    </script>

</body>

【问题讨论】：

标签： javascript html html-select

【解决方案1】：

一种方法如下：

// modifying the DOM once the DOM has been loaded, using EventTarget.addEventListener()
// to listen for the 'DOMContentLoaded' event, and and then modifying the DOM in the anonymous
// Arrow function:
window.addEventListener('DOMContentLoaded', (e) => {
  // create a new Date, which defaults to returning the date of the current 'today':
  let date = new Date(),
    // we then use the getUTCMonth() to retrieve the number of the current month, in
    // the range of 0 (January) to 11 (December); we therefore add 1 to reflect the
    // value: month pairing in the HTML:
    currentMonth = date.getUTCMonth() + 1,
    // here we use document.querySelector() to return the first matching element
    // in the document that matches the selector; the selector is a template-
    // literal string which allows us to interpolate JavaScript into the string,
    // which we do to create a CSS attribute-selector:
    opt = document.querySelector(`#month option[value="${currentMonth}"]`);
  // we then set the 'selected' property of that node to true:
  opt.selected = true;
  // and the defaultSelected value to true:
  opt.defaultSelected = true;
});

<!-- note the removal of the inline event-handling; in which the
     default was selected only on interaction; this has been moved
     to the JavaScript section, where it happens on the
     DOMContentLoaded event: -->
<select id="month">
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>

参考资料：

CSS：
- Attribute selectors。
JavaScript：

【讨论】：

【解决方案2】：

在此变量中设置您的默认值，例如 2 或类似 defaultMonth

<select id="month", onchange="setMonth();" value="defaultMonth">
    <option value='1' selected>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
</select>

【讨论】：