Giữ các cặp khóa giá trị cùng nhau trong HTML <select/> bằng JQuery?

Question

Cho một lựa chọn có nhiều tùy chọn trong JQuery.

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

Khóa nên được lưu trữ và truy xuất như thế nào?

ID có thể là địa điểm OK nhưng sẽ không được đảm bảo duy nhất nếu tôi có nhiều giá trị chia sẻ của một lựa chọn (và các tình huống khác).

Cảm ơn

và theo tinh thần 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

Giống như lucas đã nói thuộc tính giá trị là những gì bạn cần. Sử dụng mã của bạn sẽ trông giống như thế này (tôi đã thêm thuộc tính id vào lựa chọn để làm cho nó phù hợp):

$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 cho phép bạn lấy giá trị bằng phương thức val(). Sử dụng nó trên thẻ chọn bạn nhận được giá trị của tùy chọn hiện tại đã chọn.

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

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

Chỉ trong trường hợp, phương pháp .each lặp qua mọi phần tử truy vấn phù hợp.

Answer 2

Thẻ HTML <option> có thuộc tính được gọi là "giá trị", nơi bạn có thể lưu khóa của mình.

ví dụ .:

<option value=1>Jason</option> 

Tôi không biết làm thế nào điều này sẽ chơi với jQuery (tôi không sử dụng nó), nhưng tôi hy vọng điều này là hữu ích tuy nhiên.

Answer 3

Nếu bạn đang sử dụng HTML5, bạn có thể sử dụng custom data attribute. Nó sẽ giống như thế này:

$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 

Sau đó, để có được khóa đã chọn bạn có thể làm:

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

Hoặc nếu bạn đang sử dụng XHTML, sau đó bạn có thể tạo một không gian tên tùy chỉnh.

Vì bạn nói các phím có thể lặp lại, sử dụng thuộc tính giá trị có thể không phải là một tùy chọn kể từ đó bạn sẽ không thể biết tùy chọn nào khác với cùng giá trị được chọn trên bài đăng biểu mẫu.