使用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属性的值（在示例中为3.2）。

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轻松访问。

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

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

为此，您可以

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

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

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

它不是有效的代码，但我想它可以完成工作。

我以我认为您的问题可能是两个例子为例：

http://jsfiddle.net/grdn4/

签出以存储其他值。它使用数据属性存储其他值：

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

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代码：事件：更改

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

具有元素libelle.val（）或libelle.text（）

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

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