Javascript 使用 jQuery 添加附加数据以选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4564659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding additional data to select options using jQuery
提问by jim smith
Very simple question I hope.
很简单的问题，我希望。
I have the usual <select>box like this
我有这样的普通<select>盒子
<select id="select">
<option value="1">this</option>
<option value="2">that</option>
<option value="3">other</option>
</select>
I can get the selected value (by using $("#select").val()) and the selected item's display value (by using $("#select :selected").text().
我可以获取所选值（通过使用$("#select").val()）和所选项目的显示值（通过使用$("#select :selected").text().
But how can I store like an additional value in the <option>tag? I would like to be able to do something like <option value="3.1" value2="3.2">other</option>and get the value of the value2attribute (which would be 3.2 in the example).
但是如何在<option>标签中存储一个附加值呢？我希望能够执行类似操作<option value="3.1" value2="3.2">other</option>并获取value2属性的值（在示例中为 3.2）。
回答by Phrogz
HTML Markup
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>
Code
代码
// 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');
See this as a working sample using jQuery here: http://jsfiddle.net/GsdCj/1/
See this as a working sample using plain JavaScript here: http://jsfiddle.net/GsdCj/2/
在此处将其视为使用 jQuery 的工作示例：http: //jsfiddle.net/GsdCj/1/在此处将
其视为使用纯 JavaScript 的工作示例：http: //jsfiddle.net/GsdCj/2/
By using data attributesfrom HTML5 you can add extra data to elements in a syntactically-valid manner that is also easily accessible from jQuery.
通过使用HTML5 中的数据属性，您可以以语法有效的方式向元素添加额外的数据，该方式也可以从 jQuery 轻松访问。
回答by mikesir87
To me, it sounds like you want to create a new attribute? Do you want
对我来说，听起来您想创建一个新属性？你想要
<option value="2" value2="somethingElse">...
To do this, you can do
要做到这一点，你可以这样做
$(your selector).attr('value2', 'the value');
And then to retrieve it, you can use
然后要检索它，您可以使用
$(your selector).attr('value2')
It's not going to be valid code, but I guess it does the job.
它不会是有效的代码，但我想它可以完成这项工作。
回答by zsalzbank
I made two examples from what I think your question might be:
我从我认为你的问题可能是两个例子：
Check this out for storing additional values. It uses data attributes to store the other value:
检查这个以存储附加值。它使用数据属性来存储另一个值：
回答by Fadid
HTML/JSP Markup:
HTML/JSP 标记：
<form:option
data-libelle="${compte.libelleCompte}"
data-raison="${compte.libelleSociale}" data-rib="${compte.numeroCompte}" <c:out value="${compte.libelleCompte} *MAD*"/>
</form:option>
JQUERY CODE: Event: change
JQUERY 代码：事件：更改
var $this = $(this);
var $selectedOption = $this.find('option:selected');
var libelle = $selectedOption.data('libelle');
To have a element libelle.val() or libelle.text()
拥有一个元素 libelle.val() 或 libelle.text()
回答by Kyle
To store another value in select options:
要在选择选项中存储另一个值：
$("#select").append('<option value="4">another</option>')
