Question

I have a select box, and I’d like to add a confirm before changing it to a specific option. Example:

<select name="select">
    <option value="foo" selected="selected">foo</option>
    <option value="bar">bar</option>
</select>​​​​​​​​​​​​​​​​​​

$('select').change(function() {
    var selected = $(this).val();

    if (selected == 'bar') {
        if (!confirm('Are you sure?')) {
            // set back to previously selected option
        }
    }
});

I’m thinking about adding a hidden input field and update its value every time the select is changed. That way I can retrieve the previous value in the change function. Example:

<input type="hidden" name="current" value="foo" />

$('select').change(function() {
    var selected = $(this).val();
    var current = $('input[name=current]').val();

    if (selected == 'bar') {
        if (!confirm('Are you sure?')) {
            $(this).val(current);
            return false;
        }
    }

    $('input[name=current]').val(selected);
});

Is there an easier/better way to accomplish this?

Answer 1

Rather than using a global variable (evil!) or a hidden element (abuse of the DOM) you can use the $.data feature:

$('select').change(function() {
    var selected = $(this).val();

    if (selected == 'bar') {
        if (!confirm('Are you sure?')) {
            $(this).val($.data(this, 'current'));
            return false;
        }     
    }

    $.data(this, 'current', $(this).val());
});