javascript - 仅在选定模式下更改选定选项的文本

Question

不知道上面的标题是不是把大家弄糊涂了。我的问题如下。

我的代码使用标准的 javascript(没有 jQuery)和 HTML。要求是对于 <select>...</select>菜单，我有一个不同长度的动态列表。

现在如果 option[selectedIndex].text > 43 的长度字符，我想更改 option[selectecIndex]到一个新的文本。

我可以通过调用来做到这一点

this.options[this.selectedIndex].text = "changed text"; 

在 onChange 事件中工作正常。这里的问题是，一旦用户决定更改选择，下拉列表就会显示带有更改文本的先前选择的文本。这需要显示原始列表。

我被难住了!有更简单的方法吗？

任何帮助都会很棒。

谢谢

Answer 1

您可以将以前的文本值存储在某些数据属性中，并在必要时使用它来重置文本:

document.getElementById('test').onchange = function() {

    var option = this.options[this.selectedIndex];

    option.setAttribute('data-text', option.text);
    option.text = "changed text";

    // Reset texts for all other options but current
    for (var i = this.options.length; i--; ) {
        if (i == this.selectedIndex) continue;
        var text = this.options[i].getAttribute('data-text');
        if (text) this.options[i].text = text;
    }
};

http://jsfiddle.net/kb7CW/