小编典典

使用jQuery添加其他数据以选择选项

javascript

我希望这个问题很简单。

我有一个<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)。


阅读 295

收藏
2020-05-01

共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');

通过使用HTML5中的数据属性,您可以以语法上有效的方式向元素添加额外的数据,该方式也可以从jQuery轻松访问。

2020-05-01