Javascript HTML选择：当关闭时，如何更改标签？

考虑这一点：

    <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

其目的还在于显示所选年份，而无需在打开的选项中重复该年份，使其看起来更清晰

---

这是未经测试的，因此它可能不起作用或可能有缺陷。例如，它可能会永久性地更改选项的标签，但可能会给您一些启示

<script type="text/JavaScript">
    function changeLabel()
    {
        var dropDown = document.getElementById("selMonth");
        dropDown.options[dropDown.selectedIndex].label += " "+ dropDown.options[dropDown.selectedIndex].parentNode.label;
    }
</script>

<select name="month_selection" id="selMonth" onchange="changeLabel()"> 
    <optgroup label="2012"> 
        <option value="1">January</option> 
    </optgroup> 
    <optgroup label="2011"> 
        <option value="1">January</option> 
        <option value="2">February</option> 

---

这是一个相当简单的方法。。。使用更改/输入，并在重点突出时，将文本重置为年份之前的内容

在我测试过的所有浏览器中都能正常工作。。问题是，无论您做什么，您总是必须更改所选元素的文本值，这是无法避免的。在不部署到此处的情况下测试自己-

---

很高兴看到有人努力保持一个干净的UI。太好了，更多的人应该这么做。然而，我建议不要以这种方式处理问题。您可能会尝试强制某个元素执行它原本不打算执行的操作。即使你找到了一个解决办法，它也可能会让你陷入跨浏览器测试的地狱，或者干脆停止开发新的浏览器版本

---

我建议用JQuery或类似的可编写脚本的SELECT小部件替换它，例如。这将为您提供通过JavaScript调整显示所需的所有灵活性。

假设您使用JS库实现视觉效果，您将必须查看库以及它用于将信息推送到显示元素的内容，并将其更改为包含optgroup。否则，如果这只是一个苹果式的视觉效果，我不确定你从开箱即用的控件中有什么选项。@BradChristie，这只是标准的苹果浏览器chrome控件。要完成此操作，您需要编写一些javascript来更改单击时所选项目的值，以将年份追加到末尾。@Rorymcrossan:更改选择时的值也将更改下拉列表的视觉效果。他们最好使用jquery制服之类的东西，并将控件和包装成一组s，以获得视觉效果，同时支持数据并可供提交。@BradChristie如果您的意思是选择会变宽，您可以在CSS中将其宽度设置为固定的px大小。@Rorymcrossan：甚至不会变宽，如果你有一月，那么在更改设置该元素的文本时，下一次出现下拉列表时，你会看到2012，只有该元素使它像一个酸痛的拇指一样突出。我不能使用onChange，如果我使用onChange，当我第二次打开它时，列表中新选择的选项将重复年份。这是我已经找到的部分解决方案，但还不完整。e、 g.jsfiddle.net/exdpa，thx至BradChristie@Prody：嗯，你可以使用onchange，但也许你不能更改标签。也许你的解决方案是在下拉列表顶部创建一个文本框，让它看起来像是下拉列表本身。添加onclick或onfocus事件或打开下拉列表的内容，然后更改下拉列表onchange事件中文本框的值。再说一次，没有以任何方式进行测试，但可能是一个想法。

<select name="month_selection" id="month_selection">
    <optgroup label="2012">
        <option value="1">January</option>
    </optgroup>
    <optgroup label="2011">
        <option value="1">January</option>
        <option value="2">February</option>
    </optgroup>
</select>

<script type="text/javascript">
function attach(ele, evt, cb) { ele.addEventListener ? ele.addEventListener(evt, cb) : ele.attachEvent('on' + evt, cb); }
function evSupported(ele, evt) { return ((('on'+evt) in ele) ? true : (function(ele, evt) { ele.setAttribute('on'+evt, 'return;'); return (typeof ele['on'+evt] == 'function'); })()); };

var selectBox = document.getElementById('month_selection');

attach(selectBox, (evSupported(selectBox, 'input') ? 'input' : 'change'), function() {
    this.options[this.selectedIndex].innerText += ' ' + this.options[this.selectedIndex].parentNode.label;
    this.blur();
});
attach(selectBox, 'focus', function() {
    for (var i = 0; i < this.options.length; i++) {
        this.options[i].innerText = this.options[i].innerText.split(' ')[0];
    }
});
</script>