선택 변경 시 데이터 속성 값 가져오기

선택 변경 시 데이터 속성 값 가져오기

다음 코드는 '정의되지 않음'을 반환합니다...

$('select').change(function(){
    alert($(this).data('id'));
});

<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

선택한 옵션을 찾아야 합니다.

$(this).find(':selected').data('id')

또는

$(this).find(':selected').attr('data-id')

첫 번째 방법이 선호되기는 하지만요.

다음을 시도합니다.

$('select').change(function(){
  alert($(this).children('option:selected').data('id'));
});

변경 가입자가 선택 항목의 변경 이벤트에 가입합니다.this매개 변수는 선택 요소입니다.데이터 ID를 가져올 선택한 자식을 찾아야 합니다.

document.querySelector('select').onchange = function(){   
   alert(this.selectedOptions[0].getAttribute('data-attr')); 
};

좀 더 우아한 방법으로

$('option:selected', this).data('id')

$('#foo option:selected').data('id');

바닐라 자바스크립트:

this.querySelector(':checked').getAttribute('data-id')

사용할 수 있습니다.context와의 구문.this또는$(this)이는 다음과 같은 효과입니다.find().

$('select').change(function() {
    console.log('Clicked option value => ' + $(this).val());
    <!-- undefined console.log('$(this) without explicit :select => ' + $(this).data('id')); -->
    <!-- error console.log('this without explicit :select => ' + this.data('id')); -->
    console.log(':select & $(this) =>    ' + $(':selected', $(this)).data('id'));
    console.log(':select & this =>       ' + $(':selected', this).data('id'));
    console.log('option:select & this => ' + $('option:selected', this).data('id'));
    console.log('$(this) & find =>       ' + $(this).find(':selected').data('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option data-id="1">one</option>
    <option data-id="2">two</option>
    <option data-id="3">three</option>
</select>

미시적 최적화를 위해 다음과 같은 방법을 선택할 수 있습니다.find()코드 골퍼에 가까우면 문맥 구문이 더 간략합니다.기본적으로 코딩 스타일로 귀결됩니다.

다음은 관련 성능 비교입니다.

이것은 나에게 효과가 있습니다.

<select class="form-control" id="foo">
    <option value="first" data-id="1">first</option>
    <option value="second" data-id="2">second</option>
</select>

그리고 대본.

$('#foo').on("change",function(){
    var dataid = $("#foo option:selected").attr('data-id');
    alert(dataid)
});

이를 사용하여 텍스트, 값 및 데이터 속성을 얻을 수 있습니다.

<select name="your_name" id="your_id" onchange="getSelectedDataAttribute(this)">
    <option value="1" data-id="123">One</option>
    <option value="2" data-id="234">Two</option>
</select>

function getSelectedDataAttribute(event) {
    var selected_text = event.options[event.selectedIndex].innerHTML;
    var selected_value = event.value;
    var data-id = event.options[event.selectedIndex].dataset.id);    
}

 alert($(this).first().data('id'));

언급URL : https://stackoverflow.com/questions/8345666/on-select-change-get-data-attribute-value