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.

回答1:

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.

来源：https://stackoverflow.com/questions/2791754/change-a-select-list-display-value-upon-selecting-description