รับค่า / ข้อความที่เลือกจาก Select on change

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

ฉันต้องการรับค่าของตัวเลือกที่เลือกใน javascript: ไม่มีใครรู้วิธีรับค่าหรือข้อความที่เลือกโปรดบอกวิธีเขียนฟังก์ชันสำหรับมัน ฉันได้กำหนดฟังก์ชัน onchange () ให้เลือกแล้วฉันจะทำอย่างไรหลังจากนั้น?

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

หากคุณกำลังใช้ googling สิ่งนี้และไม่ต้องการให้ event listener เป็นแอตทริบิวต์ให้ใช้:

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>

ไม่จำเป็นต้องมีฟังก์ชัน 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;

ว้าวยังไม่มีคำตอบที่นำกลับมาใช้ใหม่ได้ในบรรดาคำตอบ .. ฉันหมายความว่าตัวจัดการเหตุการณ์แบบมาตรฐานควรได้รับเฉพาะการeventโต้แย้งและไม่ต้องใช้รหัสเลย .. ฉันจะใช้:

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
}

คุณสามารถใช้ตัวจัดการนี้กับแต่ละ - inline js:

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

jQuery:

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

หรือการตั้งค่าตัวจัดการ vanilla 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>

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

ใช้

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 ของดัชนีที่เลือกถือว่าการเลือกนั้นเป็นอาร์เรย์และคุณจะได้รับค่า

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(เช่นการสื่อสารหรือ - เลือก -)

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

หรือ (คำแนะนำใหม่)

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จะส่งคืนnewTextแทนการสื่อสาร

นอกจากนี้

หมายเหตุ: ไม่สามารถตั้งค่าคุณสมบัติป้ายกำกับใน Firefox (ส่งคืนเท่านั้น)

นี่เป็นคำถามเก่า แต่ฉันไม่แน่ใจว่าทำไมคนถึงไม่แนะนำให้ใช้ออบเจ็กต์เหตุการณ์เพื่อดึงข้อมูลแทนที่จะค้นหาผ่าน DOM อีกครั้ง

เพียงแค่ผ่านวัตถุเหตุการณ์ในฟังก์ชัน onChange ของคุณดูตัวอย่างการร้อง

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>

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

ฉันพยายามอธิบายด้วยตัวอย่างของฉันเอง แต่ฉันหวังว่ามันจะช่วยคุณได้ คุณไม่จำเป็นต้องonchange = "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>