在HTML中保持鍵值對 <select/>用jQuery？

Question

給出jQuery中有多個選項的select。

$select = $("<select></select>");
$select.append("<option>Jason</option>") //Key = 1
       .append("<option>John</option>") //Key = 32
       .append("<option>Paul</option>") //Key = 423

如何存儲和檢索密鑰？

ID可能是一個好的地方，但如果我有多個select的共享值（和其他場景），則不能保證唯一。

謝謝

並本着TMTOWTDI的精神。

$option = $("<option></option>");
$select = $("<select></select>");
$select.addOption = function(value,text){
    $(this).append($("<option/>").val(value).text(text));
};

$select.append($option.val(1).text("Jason").clone())
       .append("<option value=32>John</option>")
       .append($("<option/>").val(423).text("Paul"))
       .addOption("321","Lenny");

Answer 1

就像盧卡斯所說，價值屬性就是你所需要的。 使用你的代碼看起來像這樣（我在select中添加了一個id屬性以使其適合）：

$select = $('<select id="mySelect"></select>');
$select.append('<option value="1">Jason</option>') //Key = 1
   .append('<option value="32">John</option>') //Key = 32
   .append('<option value="423">Paul</option>') //Key = 423

jQuery允許您使用val（）方法獲取值。 在select標簽上使用它可以獲得當前所選選項的值。

$( '#mySelect' ).val(); //Gets the value for the current selected option

$( '#mySelect > option' ).each( function( index, option ) {
    option.val(); //The value for each individual option
} );

以防萬一，.each方法遍歷查詢匹配的每個元素。

Answer 2

HTML <option>標記有一個名為“value”的屬性，您可以在其中存儲密鑰。

例如：

<option value=1>Jason</option>

我不知道這將如何與jQuery（我不使用它），但我希望這是有幫助的。

Answer 3

如果您使用的是HTML5，則可以使用自定義數據屬性 。 它看起來像這樣：

$select = $("<select></select>");
$select.append("<option data-key=\"1\">Jason</option>") //Key = 1
   .append("<option data-key=\"32\">John</option>") //Key = 32
   .append("<option data-key=\"423\">Paul</option>") //Key = 423

然后，您可以執行以下選擇的鍵：

var key = $('select option:selected').attr('data-key');

或者，如果您使用的是XHTML，則可以創建自定義命名空間。

既然你說密鑰可以重復，那么使用value屬性可能不是一個選項，因為那樣你就無法分辨在表單帖子中選擇了哪個具有相同值的不同選項。