我希望这个问题很简单。
我有一个<select>像这样的普通盒子
<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()。
$("#select").val()
$("#select :selected").text()
但是,如何在<option>标签中像附加值一样存储呢?我希望能够做类似的事情<option value="3.1" value2="3.2">other</option>并获取value2属性的值(在示例中为3.2)。
<option>
<option value="3.1" value2="3.2">other</option>
value2
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');
通过使用HTML5中的数据属性,您可以以语法上有效的方式向元素添加额外的数据,该方式也可以从jQuery轻松访问。