JavaScript에서 옵션 태그의 데이터 속성을 얻는 방법

Question

선택한 드롭 다운 옵션에서 데이터 속성 값을 가져오고 싶습니다.

<select name="selection" id="mySelect"> 
    <option value="21" data-rc="25" data-clnc="10">Treatment</option> 
</select> 

var rc = ? //value of data-rc 
var clnc = ? //value of data-clnc 

없음 jQuery를하시기 바랍니다에만 자바 스크립트

:

Answer 1

당신은 dataset property을 통해 그들을 읽을 수 있습니다.

var option = document.getElementsByTagName("option")[0]; 
 

 
console.log(option.dataset.rc) 
 
console.log(option.dataset.clnc)

<option value="21" data-rc="25" data-clnc="10">Treatment</option>

또는 선택한 옵션의 값을 얻으려면 :

var selection = document.getElementById("mySelect"); 
 

 
selection.onchange = function(event){ 
 
    var rc = event.target.options[event.target.selectedIndex].dataset.rc; 
 
    var clnc = event.target.options[event.target.selectedIndex].dataset.clnc; 
 
    console.log("rc: " + rc); 
 
    console.log("clnc: " + clnc); 
 
};

<select name="selection" id="mySelect"> 
 
<option value="21" data-rc="25" data-clnc="10">Treatment</option> 
 
<option value="21" data-rc="23" data-clnc="30">Treatment1</option> 
 
<option value="21" data-rc="31" data-clnc="50">Treatment2</option> 
 
<option value="21" data-rc="14" data-clnc="75">Treatment3</option> 
 
</select>

Answer 2

당신이 할 수있는 그런 JQuery와 선택기

,

Answer 3

$ (선택) .find ("옵션 : 선택"). 선택은 당신의 "선택"태그 ID/클래스

Answer 4

입니다 clnc에 대한 RC 및 clnc 데이터 ("RC")는 우리가 선택 있다고 가정 필드

<select id="ddlViewBy"> 
     <option value="1" data-rc="25" data-clnc="10" selected="selected">test1</option> 
     <option value="2" >test2</option> 
     <option value="3">test3</option> 
    </select> 

이제 우리는 우리가 attribtues 얻을 수

var e = document.getElementById("ddlViewBy"); 
    var option= e.options[e.selectedIndex]; 

이제 우리는 선택한 옵션이 선택 목록과 선택 옵션을 얻을 것이다

var attrs = option.attributes; 

attrs는 원하는 인덱스로 속성을 얻을 수있는 속성 배열입니다.

또는 당신은

var datarc = option.getAttribute("data-rc"); 

Answer 5

확인이 작업 펜

working pen

$('#options').on('change', function(){ 
    alert($(this).find("option:selected").attr('data-rc')) 
    alert($(this).find("option:selected").attr('data-clnc')) 
});