動態更改默認選擇的選項

Question

更改 HTML 選擇元素中默認選定選項的方法是什么？ 我希望我能以某種方式將它與用戶進入網站時觸發的 javascript 函數結合起來。

例如，如果有以下代表一年的前四個月（1=Jan，2=Feb 等）在示例中， 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>

Answer 1

在這個變量中設置你的默認值，如 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>

Answer 2

一種方法如下：

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

動態更改默認選擇的選項

問題描述

2 個解決方案

解決方案1
0 2021-11-12 09:54:16

解決方案2
0 2021-11-12 10:27:39

動態更改默認選擇的選項

問題描述

2 個解決方案

解決方案1 0 2021-11-12 09:54:16

解決方案2 0 2021-11-12 10:27:39

解決方案1
0 2021-11-12 09:54:16

解決方案2
0 2021-11-12 10:27:39