2008-08-26 56 views
5

給定一個在JQuery中有多個選項的選擇。使用JQuery將關鍵值對保存在HTML <select/>中?

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

應該如何存儲和檢索密鑰?

該ID可能是一個好地方,但如果我有多個選擇的共享值(和其他場景),則不會保證唯一。

感謝

和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"); 

回答

16

像盧卡斯說,價值屬性是你需要的。使用你的代碼會是這個樣子(我添加了一個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()方法獲得的價值。在選擇標籤上使用它可以獲得當前選定選項的值。

$('#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方法遍歷查詢匹配的每個元素。

4

的HTML <option>標籤具有所謂的「價值」的屬性,在這裏你可以存儲你的關鍵。

例如爲:

<option value=1>Jason</option> 

我不知道這將如何使用jQuery玩(我不使用它),但我希望這是有益不過。

1

如果您使用的是HTML5,則可以使用custom data attribute。它應該是這樣的:

$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屬性可能不是一個選項,因爲那樣你就無法知道在表單文章中選擇了哪個具有相同值的不同選項。

相關問題