自定義標籤包含選項中的數據

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>