Question

这是我的代码：

<select>
    <option selected="selected">Actions</option>
    <option>Create Subset</option>
    <option>Goto</option>
    <option>End</option>
</select>

我正在显示用户选择的任何选项的弹出窗口，按 Esc 或单击关闭按钮时，弹出窗口将消失。

现在，假设用户选择了“创建子集”选项并将适当的数据填充到该弹出窗口中。目前，“创建子集”将出现在选择框中。

现在，如果用户将选项更改为“转到”（即选择框中将显示“转到”）并按 Esc ，则弹出窗口将消失但仍会有{转到“<select>框中的”转到“

所以我的问题是：当用户点击 Esc 或点击关闭按钮时，有没有办法将选择框选项更改为先前选择的选项？

Answer 1

首先，你必须给你的选项一些值和你的选择框 - 一些id：

<select id="yourselect">
    <option value="Actions" selected="selected">Actions</option>
    <option value="Create Subset">Create Subset</option>
    <option value="Goto">Goto</option>
    <option value="End">End</option>
</select>

然后绑定更改事件以收听您的复选框更改并记住所选的当前和以前的选项：

$("#yourselect").on("change", function() {
    if( $(this).data("selected") ) {
        $(this).data( "prev-selected", $(this).data("selected") );
    }

    $(this).data( "selected", $(this).val() );
});

之后，当用户按Esc或单击“取消”按钮时，您需要恢复选项

if( $("#yourselect").data("prev-selected") ) {
    $("#yourselect")
       .find( 'option[value="' + $("#yourselect").data("prev-selected") + '"]' )
       .prop( "selected", true );
}
else {
    $("#yourselect").find( "option:eq(0)" ).prop( "selected", true );
}

Answer 2

由于您尚未添加相关代码。在这里，我创建了参考jsfiddle。当用户从选择框中选择选项时，它将显示弹出窗口，并在弹出窗口关闭时将更新选择。不知道这是否是您需要的，请告诉我。

<div id='selectPopup'>
    previous selected <input type='text' value='' id='selected'/>
    <form name='test'>
        <select id='inptPAN' name='inptPAN'>
            <option value='1'>item 1</option>
            <option value='2'>item 2</option>
            <option value='3'>item 3</option>
            <option value='4'>item 4</option>
            <option value='5'>item 5</option>
            <option value='6'>item 6</option>
        </select>
    </form>
</div>

$(document).ready(function () {
    // this function is triggered as soon as something changes in the form
    $("select[name='inptPAN']").change(function () {
        //console.log('found change');
        $("#selected").val($(this).val())
        selectDialog('Pan', 'You had selected, Text: ' + $(':selected', this).text() + ' And Value : ' + $(this).val());
    });

    // Esc button event  to close pop up.

  $(document).keyup(function(event) {
        if(event.which === 27) {
               previousSelected = $("#selected").val();
                    $("#inptPAN").val('1');
                    // or enable below line to set previous selected
                  //$("#inptPAN").val(previousSelected); 
                    $('<div></div>').dialog("close");
        }
    });

    function selectDialog(title, text) {
        return $('<div></div>').append(text)
            .dialog({
            resizable: true,
            modal: true,
            buttons: {
                "CLOSE": function () {
                   previousSelected = $("#selected").val();
                    $("#inptPAN").val('1');
                    // or enable below line to set previous selected
                  //$("#inptPAN").val(previousSelected); 
                    $(this).dialog("close");
                }
            }
        });
    }
});

如何获得以前选择的选项？

2 个答案: