javascript - 使用 jQuery 添加附加数据以选择选项

Question

我希望这是一个非常简单的问题。

我有通常的<select>像这样的盒子

<select id="select">
    <option value="1">this</option>
    <option value="2">that</option>
    <option value="3">other</option>
</select>

我可以获得所选值(通过使用 $("#select").val() )和所选项目的显示值(通过使用 $("#select :selected").text() 。

但是我怎样才能在 <option> 中存储附加值呢？标签？我希望能够做类似 <option value="3.1" value2="3.2">other</option> 的事情并获取 value2 的值属性(在示例中为 3.2)。

Answer 1

HTML 标记

<select id="select">
  <option value="1" data-foo="dogs">this</option>
  <option value="2" data-foo="cats">that</option>
  <option value="3" data-foo="gerbils">other</option>
</select>

代码

// JavaScript using jQuery
$(function(){
    $('select').change(function(){
       var selected = $(this).find('option:selected');
       var extra = selected.data('foo'); 
       ...
    });
});

// Plain old JavaScript
var sel = document.getElementById('select');
var selected = sel.options[sel.selectedIndex];
var extra = selected.getAttribute('data-foo');

在此处将其视为使用 jQuery 的工作示例:http://jsfiddle.net/GsdCj/1/
在此处将其视为使用纯 JavaScript 的工作示例:http://jsfiddle.net/GsdCj/2/

通过使用 data attributes从 HTML5 开始，您可以以语法有效的方式向元素添加额外数据，这也可以从 jQuery 轻松访问。