Question

我有一个包含许多选项的选择框。选择后，我使用JQuery替换显示的文本：

$("#dropdownlist").change(function () {
    var selected = $(this).find(":selected");
    selected.text('foo');
});

然后我想在选择下拉时恢复原始值。我怎么能这样做？

我尝试过使用'click'事件但是在整个选择过程中会多次触发，这意味着'foo'总是会被覆盖。

提前致谢。

Answer 1

方法1：刚刚注意到，当使用键盘和标签输出更改下拉值时，方法2中的以下解决方案无效。

因此，在这种方法中，我在下拉菜单上使用了一个文本框，因此您不必担心更改下拉值。 DEMO

PS：我使用过JQuery UI Position API

var $ddInput = $("#dropdownInput");

$ddInput.position({
  my: "left top",
  at: "left top",
  of: "#dropdownlist"
});

$("#dropdownlist").change(function (event) {
    $ddInput.val('foo');
});

方法2：我们需要一个int标志，因为更改再次调用点击，请参阅下面的代码。 DEMO

var optionChanged = 0;

$("#dropdownlist").change(function (event) {
    var selected = $(this).find(":selected");
    selected.attr('data-orig', selected.val());
    selected.text('foo');
    optionChanged = 1;       
});

$("#dropdownlist").click (function () {     

    if (optionChanged == 2) {
        var selected = $(this).find(":selected");
        var tmp = selected.attr('data-orig');
        selected.attr('data-orig', selected.val());
        selected.text(tmp);      
    }
    optionChanged = 2;       
});

Answer 2

尝试以下数据属性：

selected.attr('data-oldtext', selected.text());

在更改之前。

必须使用空属性或原始文本“渲染”元素。

<option data-oldtext="">xxx</option>

即时更改下拉列表数据

2 个答案: