动态更改默认选择的选项
Change default selected option dynamically
更改 HTML select 元素中的默认 selected 选项的方法是什么?我希望我能以某种方式将它与用户进入网站时触发的 javascript 函数结合起来。
例如,如果以下表示一年的前四个月(1=Jan,2=Feb 等),在示例中,1
将始终是默认值 selected值。但如果当前月份是 2 (=Feb)
?
,则可以将默认值设置为 2
我可能可以使用 moment.js 库获取当前时间,但是可以动态更改 selected 值吗?
<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>
在此变量中设置默认值,如 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>
一种方法如下:
// 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:
- JavaScript:
更改 HTML select 元素中的默认 selected 选项的方法是什么?我希望我能以某种方式将它与用户进入网站时触发的 javascript 函数结合起来。
例如,如果以下表示一年的前四个月(1=Jan,2=Feb 等),在示例中,1
将始终是默认值 selected值。但如果当前月份是 2 (=Feb)
?
2
我可能可以使用 moment.js 库获取当前时间,但是可以动态更改 selected 值吗?
<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>
在此变量中设置默认值,如 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>
一种方法如下:
// 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:
- JavaScript: