在下面的代码示例中,我们将使用HTML、CSS和JavaScript来实现保存最后选择的下拉菜单选项。
HTML部分:
CSS部分(可选):
#dropdown {
width: 200px;
height: 30px;
}
button {
margin-top: 10px;
}
JavaScript部分:
// 获取下拉菜单元素
var dropdown = document.getElementById('dropdown');
// 获取保存的选项
var lastSelectedOption = localStorage.getItem('lastSelectedOption');
// 如果有保存的选项,则设置为下拉菜单的默认选项
if (lastSelectedOption) {
dropdown.value = lastSelectedOption;
}
// 保存最后选择的选项
function saveLastSelectedOption() {
var selectedOption = dropdown.value;
localStorage.setItem('lastSelectedOption', selectedOption);
alert('已保存选择:' + selectedOption);
}
在上述代码中,我们通过使用localStorage来保存最后选择的选项。在页面加载时,我们从localStorage中获取保存的选项,并将其设置为下拉菜单的默认选项。当用户选择一个选项并点击保存按钮时,我们将其保存到localStorage中。
请注意,localStorage只能存储字符串类型的数据。如果下拉菜单的选项值是数字或其他类型的值,需要通过转换为字符串来存储。在这个示例中,我们使用了字符串类型的值作为选项值。