การเพิ่มข้อมูลเพิ่มเติมเพื่อเลือกตัวเลือกโดยใช้ jQuery

คำถามง่าย ๆ ฉันหวังว่า

ฉันมี<select>กล่องปกติเช่นนี้

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

ฉันจะได้รับความคุ้มค่าที่เลือก (โดยใช้$("#select").val()) และค่าการแสดงรายการที่เลือกของ $("#select :selected").text()(โดยการใช้

แต่ฉันจะเก็บไว้เป็นค่าเพิ่มเติมใน<option>แท็กได้อย่างไร ฉันต้องการที่จะทำสิ่งที่ชอบ<option value="3.1" value2="3.2">other</option>และได้รับค่าของvalue2คุณลักษณะ (ซึ่งจะเป็น 3.2 ในตัวอย่าง)

HTML Markup

<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>

รหัส

// 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');

ดูสิ่งนี้เป็นตัวอย่างการทำงานโดยใช้ jQuery ที่นี่: http://jsfiddle.net/GsdCj/1/
ดูว่านี่เป็นตัวอย่างการทำงานโดยใช้ JavaScript ธรรมดาที่นี่: http://jsfiddle.net/GsdCj/2/

โดยการใช้ข้อมูลคุณลักษณะจาก HTML5 คุณสามารถเพิ่มข้อมูลเพิ่มเติมให้กับองค์ประกอบในลักษณะที่ถูกต้องทางไวยากรณ์ที่สามารถเข้าถึงได้ง่ายจาก jQuery

สำหรับฉันดูเหมือนคุณต้องการสร้างแอตทริบิวต์ใหม่หรือไม่ คุณต้องการ

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

ในการทำเช่นนี้คุณสามารถทำได้

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

จากนั้นเมื่อต้องการเรียกคืนคุณสามารถใช้

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

มันจะไม่เป็นรหัสที่ถูกต้อง แต่ฉันเดาว่ามันทำงานได้ดี

ฉันทำสองตัวอย่างจากสิ่งที่ฉันคิดว่าคำถามของคุณอาจเป็น:

http://jsfiddle.net/grdn4/

ลองดูสิสำหรับการเก็บค่าเพิ่มเติม มันใช้คุณลักษณะข้อมูลเพื่อเก็บค่าอื่น ๆ :

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

มาร์กอัป HTML / JSP:

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

รหัส JQUERY: กิจกรรม: เปลี่ยน

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

หากต้องการมีองค์ประกอบ libelle.val () หรือ libelle.text ()

ในการจัดเก็บค่าอื่นในตัวเลือกที่เลือก:

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