选择描述时更改选择列表显示值

【问题标题】：Change a select list display value upon selecting description选择描述时更改选择列表显示值
【发布时间】：2010-05-13 05:45:53
【问题描述】：

我想要一个执行以下操作的选择列表：

When the select list is open, display the list of descriptions.
当用户选择一个项目时，选择列表将关闭并且只显示该值。

这样做的原因是为了节省空间，因为值会更短。我希望在 jQuery 中有一个答案。

谢谢。

【问题讨论】：

所以你有一个像<option value="Cheesy">Dangerously Cheesy</option>这样的选项。当列表关闭时，所选项目应该只显示“Cheesy”值，但是当他们点击下拉菜单时，他们选择的选项会显示“Dangerously Cheesy”？

标签： javascript jquery html selectlist

【解决方案1】：

好的，我已经解决了：

$("#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());

可能会优化一下。

【讨论】：

请注意上述代码的两点： 1. 用户选择相同的值两次时会出现问题。由于选择列表实际上并没有改变，因此只会触发焦点事件。 2. 操作选择列表时，IE会重置选择列表的状态为关闭。用户需要选择列表两次。