HTML Select：当 <select> 关闭时如何更改标签？
考虑一下：
<select name="month_selection">
<optgroup label="2012">
<option value="1">January</option>
</optgroup>
<optgroup label="2011">
<option value="1">January</option>
<option value="2">February</option>
上面的 HTML 在打开时看起来像 #1，在关闭时看起来像 #2。
我怎样才能让封闭版本看起来像#3？
目的是还显示选定的年份，而不在打开的选项中重复它（因此看起来更干净）。
我原来的（标记为正确的）答案太旧了，无法使用，所以这里有一个更新的答案，可能是一个有用的起点。它在选择框宽度方面有一些奇怪的地方，需要根据您的 UI 结构来解决。希望它有帮助。
\n\r\n
\r\n\n\r\n
\r\ndocument.querySelector(\'select\').addEventListener("change", function(e) {\n var value = e.target.value\n var option = e.target.querySelector("option[value=\'" + value + "\']")\n var group = option.parentElement\n var display = document.querySelector("#value")\n var text = option.text + " " + group.label\n display.innerText = text\n})#wrapper {\n position: relative;\n }\n \n#value {\n position: absolute;\n pointer-events: none;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n font-size: 0.8rem;\n padding-left: 0.5em;\n }\n \nselect {\n color: #FFFFFF;\n width: 100%;\n}\n\nselect option {\n color: black;\n}<html>\n <div id="wrapper">\n <div id="value">Select Date\xe2\x80\xa6</div>\n <select>\n <optgroup label="2012">\n <option value="1">January</option>\n <option value="2">February</option>\n </optgroup>\n <optgroup label="2013">\n <option value="3">January</option>\n <option value="4">February</option>\n </optgroup>\n </select>\n </div>\n</html>\n
旧答案 (2012)
\n很高兴看到有人努力保持良好干净的用户界面。值得称赞的是，应该有更多的人这样做。不过我建议不要以这种方式解决问题。您可能会冒尝试强制某个元素执行其未设计目的的操作的风险。即使您找到了解决方法，它最终也可能会让您陷入跨浏览器测试地狱，或者干脆停止开发新的浏览器版本。
\n我建议用 JQuery 或类似的可编写脚本的 SELECT 小部件替换来替换它，例如http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/。这将为您提供通过 JavaScript 调整显示所需的所有灵活性。
\n