如何使用 jQuery 获取选择元素的选定选项名称或 id答案

【问题标题】：How can i get the selected option name or id of a select element using jQuery如何使用 jQuery 获取选择元素的选定选项名称或 id
【发布时间】：2010-05-18 20:35:25
【问题描述】：

我有一个由一系列选择框组成的“问卷”。

我需要在选项中使用两个属性。对于每个选定的选项，我需要该值（我知道如何获取并且工作正常），但我还需要存储一个附加值，该值表示数据库中特定选项的 id。

一种解决方案是将这两个值放在“值”属性中并将其解析出来。但如果我可以使用其他一些属性，这可能会更容易和更清晰。我可以添加自定义属性吗？像可以用jQuery访问的databaseId？

感谢任何建议。

【问题讨论】：

标签： jquery select options

【解决方案1】：

我不会添加自定义属性，因为这不再是有效的 HTML。

您不能使用这些option 元素的“普通”ID 属性（即任何HTML 元素都具有的属性）吗？
如果有必要，您还可以在 ID 前面加上前缀，并获取 ID 的子字符串，例如

<option id="db23123" value="value">Value</option>

或者根据您的select 的结构，您还可以使用value 属性作为数据库ID，并将其他“值”作为文本放入选项中（如果它是人类可读的）：

<option value="23123">Human Readable Value</option>

然后你可以通过.val()获取DB ID，通过.text()获取文本值。

另一个可行的解决方案，例如通过 JavaScript 动态创建 option 元素就是使用 .data() 功能。这允许您将任意键值对附加到任何 DOM 节点。

【讨论】：

对不起，我在看到你的 jFiddle 之前删除了我的原始评论。它确实有效，但我只是认为开发人员需要清楚如何访问它。您显示的 jFiddle 访问一个通用的“选项”元素，但如果有多个选项元素，它将所有结果连接在一起。我“认为”最初的帖子旨在获取选定元素的 id，类似于 ("#my_selector :selected").attr("id"); ....除非我弄错或误读，这是完全可能的。
@Shem：是的，当然，但我希望使用.text 的人知道这一点。文档中说 “获取匹配元素集中每个元素的组合文本内容，包括它们的后代，或者设置匹配元素的文本内容。” 如果您想要特定 ( single) 元素，您必须只选择那个元素。但是，是的，我同意我没有展示如何获得选定的选项。

【解决方案2】：

您可以使用metadata-plugin。

你可以这样使用：

标记：

<select>
  <option class="{db_id: 1}" name="X" value="y" selected="selected">
  [...]
</select>

脚本：

  var data = $('option:selected').metadata();
  alert(data.db_id);

【讨论】：