我希望这是一个非常简单的问题。
我有像这样的<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)。
答案 0 :(得分:288)
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中的data attributes,您可以以语法有效的方式向元素添加额外的数据,也可以从jQuery轻松访问。
答案 1 :(得分:4)
对我而言,听起来你想要创建一个新属性?你想要吗
<option value="2" value2="somethingElse">...
为此,您可以
$(your selector).attr('value2', 'the value');
然后要检索它,你可以使用
$(your selector).attr('value2')
这不是有效的代码,但我想它能完成这项工作。
答案 2 :(得分:3)
答案 3 :(得分:0)
HTML
<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);
}
});
您可以使用 option.[data-attribute] 访问选项标签的数据属性
答案 4 :(得分:-2)
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()
答案 5 :(得分:-4)
在选择选项中存储另一个值:
$("#select").append('<option value="4">another</option>')