Değiştirildiğinde Seç'ten seçilen değeri / metni alın

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

Javascript'te seçilen seçeneğin değerini almam gerekiyor: seçilen değeri veya metni nasıl elde edeceğini bilen var mı, lütfen bunun için nasıl bir işlev yazılacağını söyleyin. Onchange () işlevini seçmek için atadım, bundan sonra ne yapmalıyım?

Bunun için JavaScript veya jQuery kullanın.

JavaScript kullanma

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

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

JQuery kullanma

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

Bunu Google'da araştırıyorsanız ve olay dinleyicisinin bir öznitelik olmasını istemiyorsanız, şunu kullanın:

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>

Değişim işlevine gerek yok. Değeri bir satırda yakalayabilirsiniz:

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

Veya daha iyi okunabilirlik için bölün:

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

select_id.options[select_id.selectedIndex].value;

Vay canına, cevaplar arasında henüz yeniden kullanılabilir çözümler yok .. Demek istediğim, standart bir olay işleyicisi sadece bir eventargüman almalı ve hiç kimlik kullanmak zorunda kalmamalı .. Kullanırım:

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
}

Bu işleyiciyi her bir satır içi js ile kullanabilirsiniz:

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

jQuery:

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

veya vanilya JS işleyici ayarı:

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

Ve sahip olduğunuz her selectöğe için bunu yeniden yazmak zorunda değilsiniz .

Örnek pasaj:

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

Kullanım

document.getElementById("select_id").selectedIndex

Veya değeri almak için:

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>

uyarıda, seçilen dizinin INT değerini göreceksiniz, seçimi bir dizi olarak ele alacaksınız ve değeri alacaksınız

HTML:

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

JS:

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

Merak ediyorum, herkes hakkında gönderi paylaştı valueve alma textseçeneği var ve <option>kimse önermedi label.

Bu yüzden ben de öneriyorum label, tüm tarayıcıların desteklediği

Almak için value(diğerlerinin önerdiği gibi)

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

Almak için option text(yani İletişim veya -Seç-)

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

VEYA (Yeni öneri)

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>

Not: optionDeğer 2 için yukarıdaki HTML'de , İletişim yerine newTextlabel döndürür

Ayrıca

Not: Firefox'ta etiket özelliğini ayarlamak mümkün değildir (yalnızca dönüş).

Bu eski bir sorudur, ancak insanların DOM'da tekrar arama yapmak yerine bilgileri almak için olay nesnesini kullanmayı neden önermediğinden emin değilim.

OnChange işlevinizdeki olay nesnesine gidin, aşağıdaki örneğe bakın

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

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

Bu, 7 yıl önceki varsayılan davranış değilse, bugün bunu arayanlar için faydalı olabilir.

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;

Kendi örneğimle açıklamaya çalıştım ama umarım size yardımcı olur. Onchange = "test ()" gerekmez Canlı bir sonuç almak için lütfen kod parçacığını çalıştırın.

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>