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 마크 업

<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/은
: 여기에 일반 자바 스크립트를 사용하여 작업 샘플로이보기 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>

쿼리 코드 : 이벤트 : 변경

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