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

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>

---

一些背景：

Mozilla发布了一个很好的指南，介绍如何使用JS访问这些属性。 请注意，建议使用短划线（ - ）分隔属性，而不是任何其他命名约定，例如data-product-name而不是data-productName 。 这是因为JS中的.dataset方法将破折号分隔的数据属性转换为camelCase。 因此，例如，可以通过.dataset.productName访问data-product-name 。

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>