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/

Answer 2

你可以用jquery完成它。这是一个工作小提琴：http://jsfiddle.net/kb7CW/1/

以下是它的脚本：

      //check if the changed text option exists, if so, hide it
$("select").on('click', function(){
   if($('option#changed').length > 0)
   {
        $("#changed").hide()
   }
});
//bind on change
$("select").on('change', function(){
    var val = $(":selected").val(); //get the value of the selected item
    var text = $(':selected').html(); //get the text inside the option tag
    $(":selected").removeAttr('selected'); //remove the selected item from the selectedIndex
    if($("#changed").length <1) //if the changed option doesn't exist, create a new option with the text you want it to have (perhaps substring 43 would be right
          $(this).append('<option id="changed" value =' + val + ' selected="selected">Changed Text</option>');
    else
        $('#changed').val(val) //if it already exists, change its value

   $(this).prop('selectedIndex', $("#changed").prop('index')); //set the changed text option to selected;

});

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

2 个答案: