Question

I have a select box with a number of options. When a selection is made, I replace the displayed text using JQuery:

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

I’d then like to restore the original value when the select is dropped down. How can I do this?

I’ve tried using the ‘click’ event but this gets fired multiple times throughout the selection process, meaning that ‘foo’ always gets overwritten.

Thanks in advance.

Answer 1

Approach 1: Just noticed that the below solution in approach 2 is not working when changed the drop down value using keyboard and tabbed out.

So in this approach I used a text box over the drop down, so you don’t need to worry about changing the drop down value. DEMO

PS: I have used JQuery UI Position API

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

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

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

Approach 2: We need an int flag as the change is calling the click again, see my code below. 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;       
});