CODEWITHSUNDEEP
javascriptjquery
Jalay
Jalay

Reputation: 66

How to get previously selected option?

Here's my code:

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

I'm showing popup for whatever option user selects, and on pressing Esc or on clicking the close button, the popup will disappear.

Now, suppose user selected "Create Subset" option and filled appropriate data into that popup. Currently "Create Subset" will be there in select box.

Now if user changed the option to "Goto" (i.e. there will be "Goto" in the select box) and pressed Esc, hence the popup will disappear but there will still be "Goto" in the <select> box!

So my question is: Is there any way to change the select box option to the previously selected option when the user hits Esc or click the close button?

Upvotes: 0

Views: 668

Answers (2)

Dave
Dave

Reputation: 4436

Since you have not added relevant code. Here i created reference jsfiddle . When user selects option from select box, it will display popup, and on close of popup it will update select. Not sure if this is what you need, let me know. 

<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");
                }
            }
        });
    }
});

Upvotes: 1

AVK
AVK

Reputation: 645

First you gotta give your option's some values and your select box - some 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>

Then bind a change event to listen to your checkbox changes and remember the current and previous options that were selected:

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

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

After that, when user presses Esc or click Cancel button, you need to restore the option

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 );
}

Upvotes: 2

Related Questions