Dapatkan nilai / teks yang dipilih dari Select on change

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

Saya perlu mendapatkan nilai dari opsi yang dipilih di javascript: apakah ada yang tahu cara mendapatkan nilai atau teks yang dipilih, tolong beri tahu cara menulis fungsi untuknya. Saya telah menetapkan fungsi onchange () untuk memilih jadi apa yang harus saya lakukan setelah itu?

Gunakan JavaScript atau jQuery untuk ini.

Menggunakan JavaScript

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

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

Menggunakan jQuery

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

Jika Anda googling ini, dan tidak ingin event listener menjadi atribut, gunakan:

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>

Tidak perlu fungsi onchange. Anda dapat mengambil nilainya dalam satu baris:

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

Atau, pisahkan agar lebih mudah dibaca:

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

select_id.options[select_id.selectedIndex].value;

Wow, belum ada solusi yang benar-benar dapat digunakan kembali di antara jawaban .. Maksud saya, penangan acara standar seharusnya hanya mendapatkan eventargumen dan tidak harus menggunakan id sama sekali .. Saya akan menggunakan:

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
}

Anda dapat menggunakan penangan ini dengan masing-masing - inline js:

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

jQuery:

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

atau pengaturan penangan vanilla JS:

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

Dan tidak perlu menulis ulang ini untuk setiap selectelemen yang Anda miliki.

Contoh cuplikan:

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

Menggunakan

document.getElementById("select_id").selectedIndex

Atau untuk mendapatkan nilainya:

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>

di peringatan Anda akan melihat nilai INT dari indeks yang dipilih, perlakukan seleksi sebagai array dan Anda akan mendapatkan nilainya

HTML:

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

JS:

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

Saya ingin tahu bahwa setiap orang telah memposting tentang valuedan textopsi untuk mendapatkan <option>dan tidak ada yang menyarankan label.

Jadi saya menyarankan labeljuga, karena didukung oleh semua browser

Untuk mendapatkan value(sama seperti yang disarankan orang lain)

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

Untuk mendapatkan option text(mis. Komunikasi atau -Pilih-)

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

ATAU (Saran baru)

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>

Catatan: Dalam HTML di atas untuk optionnilai 2, labelakan mengembalikan newText, bukan Komunikasi

Juga

Catatan: Properti label tidak dapat disetel di Firefox (hanya dikembalikan).

Ini adalah pertanyaan lama, tapi saya tidak yakin mengapa orang tidak menyarankan menggunakan objek acara untuk mengambil info daripada mencari melalui DOM lagi.

Cukup melalui objek acara di fungsi onChange Anda, lihat contoh di bawah

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

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

Mungkin berguna bagi orang yang mencari ini hari ini jika ini bukan perilaku default 7 tahun yang lalu

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;

Saya telah mencoba menjelaskan dengan sampel saya sendiri, tetapi saya harap ini akan membantu Anda. Anda tidak perlu onchange = "test ()" Jalankan cuplikan kode untuk mendapatkan hasil langsung.

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>