변경 시 선택한 값/텍스트 가져오기

변경 시 선택한 값/텍스트 가져오기

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

javascript에서 선택한 옵션의 값을 받아야 합니다: 선택한 값이나 텍스트를 얻는 방법을 아는 사람이 있습니까? 그것에 대한 함수를 작성하는 방법을 알려주세요.제가 change() 기능을 선택하도록 했는데 그 이후에는 어떻게 해야 하나요?

이를 위해 자바스크립트나 jQuery를 사용합니다.

자바스크립트 사용하기

<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());
})

구글에서 이벤트 수신기를 속성으로 사용하지 않으려면 다음을 사용합니다.

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>

와, 아직 답변 중에 정말 재사용 가능한 솔루션은 없습니다.내 말은, 표준 이벤트 핸들러는 오직eventids를 사용할 필요가 전혀 없습니다.다음을 사용합니다.

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 the value
}

이 핸들러는 각각 – inline 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>

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>

온체인지 기능이 필요 없습니다.값을 한 줄로 잡을 수 있습니다.

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;

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

HTML:

<select onchange="cityChanged(this.value)">
      <option value="CHICAGO">Chicago</option>
      <option value="NEWYORK">New York</option>
</select>

JS:

function cityChanged(city) {
    alert(city);
}

여러분들이 지금까지 저희가.value그리고.text가져오는 옵션<option>아무도 제안하지 않았습니다.label.

그래서 제가 제안하는 것입니다.label또한, 모든 브라우저에서 지원하는 바와 같이

갖기 위해value(다른 제안 사항과 동일)

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

갖기 위해option text(즉, 커뮤니케이션 또는 -Select-)

function test(a) {
var x = a.options[a.selectedIndex].text;
alert(x);
}

OR (새로운 제안)

function test(a) {
var x = a.options[a.selectedIndex].label;
alert(x);
}

HTML

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

참고: 위 HTML에서 다음을 참조하십시오.option값 2,label통신 대신 새 텍스트를 반환합니다.

또한.

참고: Firefox에서는 라벨 속성을 설정할 수 없습니다(반품만 가능).

너무 복잡해지는 이유:

var select = document.querySelector('select#id.orClass');
select.addEventListener('change', function(e) {
  console.log(select.value);

  // or if it changes dynamically
  console.log(e.target.value);      
});

 let select = document.getElementById('select_id');
  select.addEventListener('change', function() {
    console.log(select.value);
    // just for test
    alert(select.value);
  });

<select id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

사용하다

document.getElementById("select_id").selectedIndex

또는 값을 얻으려면 다음을 수행합니다.

document.getElementById("select_id").value

<script>
function test(a) {
    var x = a.selectedIndex;
    alert(x);
}
</script>
<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>

경고에서 선택한 인덱스의 INT 값을 보고 선택 항목을 배열로 처리하면 값을 얻을 수 있습니다.

        $('#select_id').change(function(){
        // selected value 
        alert($(this).val());
        // selected text 
        alert($(this).find("option:selected").text());
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<select onchange="test()" id="select_id">
        <option value="0">-Select-</option>
        <option value="1">Communication</option>
    </select>

이것은 오래된 질문이지만, 왜 사람들이 DOM을 통해 다시 검색하는 대신 이벤트 객체를 사용하여 정보를 검색하는 것을 제안하지 않았는지 잘 모르겠습니다.

Change에 있는 기능의 이벤트 객체를 간단히 살펴보세요. 아래 예를 참조하십시오.

function test() { console.log(event.srcElement.value); }

http://jsfiddle.net/Corsico/3yvh9wc6/5/

7년 전의 기본 행동이 아니었다면 오늘날 이것을 찾는 사람들에게 유용할 것입니다.

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}

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

html로

(change)="onChangeCategory($event)"

javascript/typescript에서

onChangeCategory(event: any) {
    console.log(event.target.options[event.target.selectedIndex].value);
    console.log(event.target.options[event.target.selectedIndex].text);
}

"this.value"를 매개 변수로 지정한 함수에 전달하면 선택 요소에서 값을 얻을 수 있습니다.test(this.value)그리고 그 후 스크립트 요소 안에 매개 변수를 사용하여 함수를 만들고 마지막으로 작성할 수 있습니다.console.log(number)이 함수 안에서 선택한 값을 가져옵니다.

function test(number) {
  console.log(number)
}

<!DOCTYPE html>
<html>

<body>

  <p>Select a new car from the list.</p>
  <select onchange="test(this.value)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
  </select>

</body>

</html>

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}

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

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

onchange 핸들러를 어떤 함수나 문자열로 설정합니다.그 안에서 당신은 가치를 얻기 위해 코드를 씁니다.

document.getElementById('cphForm_ddlFacility').value;

또는 이전 브라우저의 경우

document.getElementById('cphForm_ddlFacility')[document.getElementById('cphForm_ddlFacility').selectedIndex].value

더 니스onChange호출됩니다. JS 또는 JQuery Code Snippet을 추가하여 생각을 실행할 수 있습니다.

//Javascript

document.getElementById("select_id").selectedIndex // prints text value of the option
document.getElementById("select_id").value // prints the value of the option 

//JQUERY 

var selected = $('#select_id option:selected').val(); 
// prints the **value** of the option clicked in the dropdown
    
var selected = $('#select_id option:selected').html(); 
// prints the **text** of the option clicked in the dropdown

제가 직접 샘플을 가지고 설명을 하려고 했는데 도움이 되었으면 좋겠습니다.change="test ()" 필요 없습니다. 라이브 결과를 얻으려면 코드 스니펫을 실행하십시오.

document.getElementById("cars").addEventListener("change", displayCar);

function displayCar() {
  var selected_value = document.getElementById("cars").value;
  alert(selected_value);
}

<select id="cars">
  <option value="bmw">BMW</option>
  <option value="mercedes">Mercedes</option>
  <option value="volkswagen">Volkswagen</option>
  <option value="audi">Audi</option>
</select>

언급URL : https://stackoverflow.com/questions/5416767/get-selected-value-text-from-select-on-change