使用 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)。

194540 次浏览
小开

在选择选项中存储另一个值:

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

我举了两个例子，我认为你的问题可能是:

Http://jsfiddle.net/grdn4/

请查看以下内容以存储其他值。它使用数据属性来存储其他值:

Http://jsfiddle.net/27qjp/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 的工作示例: < a href = “ http://jsfiddle.net/GsdCj/2/”> http://jsfiddle.net/gsdcj/2/

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

小开

在我看来，您似乎想要创建一个新属性

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

要做到这一点，你可以做到

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

然后你可以用

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

它不会是有效的代码，但是我想它起作用了。

小开

HTML/JSP 标记:

<form:option
data-libelle="${compte.libelleCompte}"
data-raison="${compte.libelleSociale}"   data-rib="${compte.numeroCompte}"                              <c:out value="${compte.libelleCompte} *MAD*"/>
</form:option>

查询代码: 事件: 改变

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

元素 libelle.val ()或 libelle.text ()

小开

超文本标示语言

<Select id="SDistrict" class="form-control">
<option value="1" data-color="yellow" > Mango </option>
</select>

初始化后的 JS

   $('#SDistrict').selectize({
create: false,
sortField: 'text',
onInitialize: function() {
var s = this;
this.revertSettings.$children.each(function() {
$.extend(s.options[this.value], $(this).data());
});
},
onChange: function(value) {
var option = this.options[value];
alert(option.text + ' color is ' + option.color);
}
});

您可以使用选项访问选项标记的 data 属性

JS Fiddle : < a href = “ https://jsfiddle.net/shashank _ p/9cqoaeyt/3/”rel = “ nofollow noReferrer”> https://jsfiddle.net/shashank_p/9cqoaeyt/3/


提交答案