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

javascript jquery html

2022-08-30 02:59:11

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

我有像这样的普通盒子<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()

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

答案 1

HTML Markup

<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/

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

答案 2

对我来说，这听起来像是你想创建一个新属性？你想要吗

<option value="2" value2="somethingElse">...

为此，您可以执行

$(your selector).attr('value2', 'the value');

然后要检索它，您可以使用

$(your selector).attr('value2')

它不会是有效的代码，但我想它能完成这项工作。