Change a select list display value upon selecting description

Question

Hello,

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.

Answer 1

You can use this to show and hide list of descriptions inlcuded in span tags

Answer 2

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.