添加额外的数据来select使用jQuery的选项

非常简单的问题，我希望。

我有这样的通常的<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属性的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/

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

Answer 2

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

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

要做到这一点，你可以做

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

然后检索它，你可以使用

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

这不会是有效的代码，但我想它是做这个工作。

Answer 3

我从你的问题可能会提出两个例子：

http://jsfiddle.net/grdn4/

检查这个存储额外的值。 它使用数据属性来存储其他值：

http://jsfiddle.net/27qJP/1/

Answer 4

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：事件：改变

 var $this = $(this); var $selectedOption = $this.find('option:selected'); var libelle = $selectedOption.data('libelle'); 

要有一个元素libelle.val（）或libelle.text（）

Answer 5

要在选项中存储另一个值：

 $("#select").append('<option value="4">another</option>')