Thêm dữ liệu bổ sung để chọn tùy chọn bằng jQuery

Câu hỏi rất đơn giản tôi hy vọng.

Tôi có <select>hộp thông thường như thế này

<select id="select">
    <option value="1">this</option>
    <option value="2">that</option>
    <option value="3">other</option>
</select>

Tôi có thể nhận giá trị đã chọn (bằng cách sử dụng $("#select").val()) và giá trị hiển thị của mục đã chọn (bằng cách sử dụng $("#select :selected").text().

Nhưng làm thế nào tôi có thể lưu trữ như một giá trị bổ sung trong <option>thẻ? Tôi muốn có thể làm một cái gì đó như <option value="3.1" value2="3.2">other</option>và nhận giá trị của value2thuộc tính (trong ví dụ này là 3,2).

Đánh dấu HTML

<select id="select">
  <option value="1" data-foo="dogs">this</option>
  <option value="2" data-foo="cats">that</option>
  <option value="3" data-foo="gerbils">other</option>
</select>

Mã

// JavaScript using jQuery
$(function(){
    $('select').change(function(){
       var selected = $(this).find('option:selected');
       var extra = selected.data('foo'); 
       ...
    });
});

// Plain old JavaScript
var sel = document.getElementById('select');
var selected = sel.options[sel.selectedIndex];
var extra = selected.getAttribute('data-foo');

Xem đây là một mẫu làm việc bằng cách sử dụng jQuery tại đây: http://jsfiddle.net/GsdCj/1/
Xem đây là một mẫu làm việc bằng cách sử dụng JavaScript đơn giản tại đây: http://jsfiddle.net/GsdCj/2/

Bằng cách sử dụng các thuộc tính dữ liệu từ HTML5, bạn có thể thêm dữ liệu bổ sung vào các phần tử theo cách hợp lệ về mặt cú pháp cũng có thể dễ dàng truy cập từ jQuery.

Đối với tôi, có vẻ như bạn muốn tạo một thuộc tính mới? Bạn có muốn

<option value="2" value2="somethingElse">...

Để làm điều này, bạn có thể làm

$(your selector).attr('value2', 'the value');

Và sau đó để lấy nó, bạn có thể sử dụng

$(your selector).attr('value2')

Nó sẽ không phải là mã hợp lệ, nhưng tôi đoán nó thực hiện công việc.

Tôi đã đưa ra hai ví dụ từ những gì tôi nghĩ câu hỏi của bạn có thể là:

http://jsfiddle.net/grdn4/

Kiểm tra này để lưu trữ các giá trị bổ sung. Nó sử dụng các thuộc tính dữ liệu để lưu trữ giá trị khác:

http://jsfiddle.net/27qJP/1/

Đánh dấu HTML / JSP:

<form:option 
data-libelle="${compte.libelleCompte}" 
data-raison="${compte.libelleSociale}"   data-rib="${compte.numeroCompte}"                              <c:out value="${compte.libelleCompte} *MAD*"/>
</form:option>

MÃ SỐ YÊU CẦU: Sự kiện: thay đổi

var $this = $(this);
var $selectedOption = $this.find('option:selected');
var libelle = $selectedOption.data('libelle');

Để có một phần tử libelle.val () hoặc libelle.text ()

Để lưu trữ giá trị khác trong các tùy chọn chọn:

$("#select").append('<option value="4">another</option>')