[javascript] 변경시 선택에서 선택한 값 / 텍스트 가져 오기

Question 1

<select onchange="test()" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

자바 스크립트에서 선택한 옵션의 값을 가져와야합니다. 선택한 값이나 텍스트를 얻는 방법을 아는 사람이 있습니까? 함수를 작성하는 방법을 알려주십시오. onchange () 함수를 선택하여 할당 했으므로 그 후에 어떻게해야합니까?

Question 2

이를 위해 JavaScript 또는 jQuery를 사용하십시오.

JavaScript 사용

<script>
function val() {
    d = document.getElementById("select_id").value;
    alert(d);
}
</script>

<select onchange="val()" id="select_id">

jQuery 사용

$('#select_id').change(function(){
    alert($(this).val());
})

Question 3

인터넷 검색 중이고 이벤트 리스너가 속성이되는 것을 원하지 않는 경우 다음을 사용하십시오.

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
});

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

스 니펫 확장

Question 4

function test(a) {
    var x = (a.value || a.options[a.selectedIndex].value);  //crossbrowser solution =)
    alert(x);
}

<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

스 니펫 확장

Question 5

onchange 기능이 필요하지 않습니다. 한 줄로 값을 가져올 수 있습니다.

document.getElementById("select_id").options[document.getElementById("select_id").selectedIndex].value;

또는 더 나은 가독성을 위해 분할하십시오.

var select_id = document.getElementById("select_id");

select_id.options[select_id.selectedIndex].value;

Question 6

와우, 아직 답변 중 재사용 가능한 솔루션이 없습니다 .. 내 말은 표준 이벤트 처리기는 event인수 만 가져와야하며 ID를 전혀 사용할 필요가 없습니다 .. 다음을 사용합니다.

function handleSelectChange(event) {

    // if you want to support some really old IEs, add
    // event = event || window.event;

    var selectElement = event.target;

    var value = selectElement.value;
    // to support really old browsers, you may use
    // selectElement.value || selectElement.options[selectElement.selectedIndex].value;
    // like el Dude has suggested

    // do whatever you want with value
}

이 핸들러를 각 – 인라인 js와 함께 사용할 수 있습니다.

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

jQuery :

jQuery('#select_id').on('change',handleSelectChange);

또는 바닐라 JS 핸들러 설정 :

var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;
// or
selector.addEventListener('change', handleSelectChange);

그리고 가지고있는 각 select요소 에 대해 이것을 다시 작성할 필요가 없습니다 .

스 니펫 예 :

function handleSelectChange(event) {

    var selectElement = event.target;
    var value = selectElement.value;
    alert(value);
}

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

스 니펫 확장

Question 7

let dropdown = document.querySelector('select');
if (dropdown) dropdown.addEventListener('change', function(event) {
    console.log(event.target.value);
});

Question 8

사용하다

document.getElementById("select_id").selectedIndex

또는 가치를 얻으려면 :

document.getElementById("select_id").value