自定义标签包含选项中的数据

Question

我有一个用户可以选择的东西列表。它目前的方式，我们有一个整数作为名称，作为价值的价格，但我需要添加一种颜色。这不是唯一的，所以我不能使用ID。

例如：

<option name='6' value="30.95">6 Orange(30.95$/month)</option> 
<option name='6' value="33.95">6 Green(33.95$/month)</option> 
<option name='10' value="32.95">10 Orange(32.95$/month)</option> 
<option name='10' value="35.95">10 Green(35.95$/month)</option> 

我需要两个非唯一值结合起来，他们要的jQuery/JavaScript的

访问

我想不会提出两个选择。我知道这是最简单的解决方案，但如果我可以坚持一个可以提供更好结果的单一解决方案。

使用任何非保留的名称标签创建自定义标签（如“prodcolor”）还是有更聪明的方法来实现这一点是否安全？

非常感谢。

Answer 1

您可以使用为此目的而发明的HTML5 data-属性。更重要的是，可以使用JS访问data-属性的值。

既然你要包括颜色，你可以使用data-colour属性，例如：

<option name='6' value="30.95" data-colour="orange">6 Orange(30.95$/month)</option> 
<option name='6' value="33.95" data-colour="green">6 Green(33.95$/month)</option> 
<option name='10' value="32.95" data-colour="orange">10 Orange(32.95$/month)</option> 
<option name='10' value="35.95" data-colour="green">10 Green(35.95$/month)</option> 

更妙的是：事实上，你甚至不应该使用name属性来存储您的数量。为什么不用data-quantity代替？ :)

<option data-quantity="6" value="30.95" data-colour="orange">6 Orange(30.95$/month)</option> 
<option data-quantity="6" value="33.95" data-colour="green">6 Green(33.95$/month)</option> 
<option data-quantity="10" value="32.95" data-colour="orange">10 Orange(32.95$/month)</option> 
<option data-quantity="10" value="35.95" data-colour="green">10 Green(35.95$/month)</option> 

---

一些背景资料：

有一个关于如何使用JS来访问这些属性的nice guide published by Mozilla。请注意，建议使用破折号（-）分隔的属性，而不是其他任何命名约定，例如， data-product-name而不是data-productName。这是因为JS中的.dataset方法将由破折号分隔的数据属性转换为camelCase。例如，data-product-name将可以通过.dataset.productName访问。

jQuery还允许您通过.attr()或.data()方法访问data-属性的值。唯一的区别在于：

• .attr()没有被缓存，所以你可以用它来访问动态修改data-属性，而.data只读取在运行时的数据属性。
• .attr()可用于读取和写入数据属性，但.data()只能用于从DOM读取数据属性。 .data()也用于访问未写入DOM的jQuery数据对象。

---

用例：

使用上面的代码，我们可以创建于change事件触发报警产品的颜色的一个简单的例子：

$(function() { 
 
    $('select').change(function() { 
 
    var $choice = $(this).find('option:selected') 
 
    alert('Colour: ' + $choice.attr('data-colour') + '\n' + 'Price: $' + $choice.val()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option name='6' value="30.95" data-colour="orange">6 Orange(30.95$/month)</option> 
 
    <option name='6' value="33.95" data-colour="green">6 Green(33.95$/month)</option> 
 
    <option name='10' value="32.95" data-colour="orange">10 Orange(32.95$/month)</option> 
 
    <option name='10' value="35.95" data-colour="green">10 Green(35.95$/month)</option> 
 
</select>