如何使用jquery恢复到下拉列表中的上一个选择列表选项?

时间:2014-12-03 20:35:05

标签: jquery

我在另一个帖子中问了类似的问题,但是我没有帮助。所以在这里我创建一个副本作为我在我的真实项目中使用的真实副本。

您可以在此fiddle

中找到我的内容
function fnOpenNormalDialog() {
    $("#dialog-confirm").html("Confirm Dialog Box");

    // Define the Dialog and its properties.
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 250,
        width: 400,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
                //callback(true);
            },
                "No": function () {
                $(this).dialog('close');
                callback();
            }
        }
    });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

function callback() {
    $("#changer").val(lastValue); // this one doesn't work.
    // $("#changer").val('value1'); // This one works fine 
}

var lastValue;

$('#changer').bind("click", function(e) {
            lastValue = $(this).val();

        }).bind("change", function (e){
          fnOpenNormalDialog();
        });
<select id="changer">
    <option value="value1">Value 1</option>
    <option value="value2">Value 2</option>
    <option value="value3">Value 3</option>
</select>

我想要做的是当用户点击取消按钮时我想在下拉列表中恢复原始选择的选项。

2 个答案:

答案 0 :(得分:3)

当用户关注select时,您可以将先前的选择值存储在变量中:

function fnOpenNormalDialog() {
  //define a variable to keep previous value
  var previous;
  $("#dialog-confirm").html("Confirm Dialog Box");

  // Define the Dialog and its properties.
  $("#dialog-confirm").dialog({
    resizable: false,
    modal: true,
    title: "Modal",
    height: 250,
    width: 400,
    buttons: {
      "Yes": function() {
        $(this).dialog('close');
        //callback(true);
      },
      "No": function() {
        $(this).dialog('close');
        callback();
      }
    }
  });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

$("#changer").on('focus', function() {
  // Store the current value on focus and on change
  previous = this.value;
});

function callback() {
  //here use previous variable to select previous option
  $("#changer").val(previous);
}

var lastValue;

$('#changer').bind("click", function(e) {
  lastValue = $(this).val();

}).bind("change", function(e) {
  fnOpenNormalDialog();
});

fiddle

答案 1 :(得分:1)

绑定到“焦点”事件而不是设置最后一个值。

$('#changer').bind("focus", function(e) {
    lastValue = $(this).val();
});

当您绑定到“点击”时,项目的选择计为另一次点击。例如:

  1. 单击下拉列表以激活元素。 lastValue设置为“value1”
  2. 您点击一个选择(比如value2)。 lastValue设置为“value2”
  3. 您在对话框中单击否,它将.val()设置为lastValue(“value2”)
  4. 使用焦点会在用户聚焦时立即填充值(无论是通过制表符还是单击选择以激活)。