Change a select list display value upon selecting description

I would like a select list that does the following:

1. When the select list is open, display the list of descriptions.
2. When the user selects an item, the select list will close an only the value will be displayed.

The reason for this is to conserve space as the values will be much shorter. I'm hoping that there's an answer in jQuery.

Thanks.开发者_StackOverflow中文版

Alright, I've worked it out:

$("#selectList").focus(function() {
  var selectedOption = $(this).find("option:selected");
  selectedOption.text(selectedOption.attr("description"));
});

$("#selectList").change(function() {
  var selectedOption = $(this).find("option:selected");
  selectedOption.attr("description", selectedOption.text());
  selectedOption.text(selectedOption.val());
});

var currSelOption = $("#selectList").find("option:selected");
currSelOption.attr("description", currSelOption .text());
currSelOption.text(currSelOption .val());

It could probably be optimized a bit.