jQuery를 사용하여 선택한 옵션에 추가 데이터 추가

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

<Select id="SDistrict" class="form-control">
    <option value="1" data-color="yellow" > Mango </option>
</select>

초기화 시 JS

   $('#SDistrict').selectize({
        create: false,
        sortField: 'text',
        onInitialize: function() {
            var s = this;
            this.revertSettings.$children.each(function() {
                $.extend(s.options[this.value], $(this).data());
            });
        },
        onChange: function(value) {
            var option = this.options[value];
            alert(option.text + ' color is ' + option.color);
        }
    });

옵션을 사용하여 옵션 태그의 데이터 속성에 액세스할 수 있습니다.[데이터 수집]

JS 피들 : https://jsfiddle.net/shashank_p/9cqoaeyt/3/

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 CODE: 이벤트: 변경

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

명예훼손.val() 또는 명예훼손.text() 요소를 갖는 것.

선택 옵션에 다른 값을 저장하는 방법

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

언급URL : https://stackoverflow.com/questions/4564659/adding-additional-data-to-select-options-using-jquery