Holen Sie sich den ausgewählten Wert / Text von Select on change

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

Ich muss den Wert der ausgewählten Option in Javascript erhalten: Weiß jemand, wie man den ausgewählten Wert oder Text erhält, bitte sagen Sie, wie man eine Funktion dafür schreibt. Ich habe die Funktion onchange () zur Auswahl zugewiesen. Was mache ich danach?

Verwenden Sie dazu entweder JavaScript oder jQuery.

Verwenden von JavaScript

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

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

Verwenden von jQuery

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

Wenn Sie dies googeln und nicht möchten, dass der Ereignis-Listener ein Attribut ist, verwenden Sie:

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>

Keine Onchange-Funktion erforderlich. Sie können den Wert in einer Zeile erfassen:

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

Oder teilen Sie es zur besseren Lesbarkeit auf:

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

select_id.options[select_id.selectedIndex].value;

Wow, noch keine wirklich wiederverwendbaren Lösungen unter den Antworten. Ich meine, ein Standard-Ereignishandler sollte nur ein eventArgument erhalten und muss überhaupt keine IDs verwenden. Ich würde verwenden:

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
}

Sie können diesen Handler mit jedem - Inline-Js verwenden:

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

jQuery:

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

oder Vanilla JS-Handler-Einstellung:

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

Und müssen Sie dies nicht für jedes selectElement neu schreiben, das Sie haben.

Beispielausschnitt:

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

Verwenden

document.getElementById("select_id").selectedIndex

Oder um den Wert zu erhalten:

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>

In der Warnung sehen Sie den INT-Wert des ausgewählten Index. Behandeln Sie die Auswahl als Array und Sie erhalten den Wert

HTML:

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

JS:

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

Ich frage mich, dass jeder darüber geschrieben hat valueund eine textOption hat, von der <option>niemand etwas vorgeschlagen hat label.

Daher schlage ich labelauch vor, wie von allen Browsern unterstützt

Zu bekommen value(wie andere vorgeschlagen)

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

Zu bekommen option text(dh Kommunikation oder -Select-)

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

ODER (neuer Vorschlag)

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>

Hinweis: Im obigen HTML- Code für optionWert 2 labelwird newText anstelle von Communication zurückgegeben

Ebenfalls

Hinweis: Es ist nicht möglich, die Label-Eigenschaft in Firefox festzulegen (nur Rückgabe).

Dies ist eine alte Frage, aber ich bin mir nicht sicher, warum die Leute nicht vorgeschlagen haben, das Ereignisobjekt zum Abrufen der Informationen zu verwenden, anstatt das DOM erneut zu durchsuchen.

Gehen Sie einfach das Ereignisobjekt in Ihrer Funktion onChange durch, siehe Beispiel unten

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

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

Könnte für Leute nützlich sein, die dies heute nachschlagen, wenn dies vor 7 Jahren nicht das Standardverhalten war

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;

Ich habe versucht, mit meiner eigenen Probe zu erklären, aber ich hoffe, es wird Ihnen helfen. Sie brauchen onchange = "test ()" nicht. Führen Sie das Code-Snippet aus, um ein Live-Ergebnis zu erhalten.

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>