Pobierz wybraną wartość / tekst z Wybierz przy zmianie

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

Muszę uzyskać wartość wybranej opcji w javascript: czy ktoś wie, jak uzyskać wybraną wartość lub tekst, powiedz, jak napisać dla niej funkcję. Przypisałem funkcję onchange () do wyboru, więc co mam zrobić później?

Użyj do tego JavaScript lub jQuery.

Korzystanie z JavaScript

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

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

Korzystanie z jQuery

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

Jeśli szukasz tego w Google i nie chcesz, aby detektor zdarzeń był atrybutem, użyj:

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>

Nie ma potrzeby korzystania z funkcji wymiany. Możesz pobrać wartość w jednej linii:

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

Lub podziel to dla lepszej czytelności:

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

select_id.options[select_id.selectedIndex].value;

Wow, nie ma jeszcze rozwiązań wielokrotnego użytku wśród odpowiedzi. Znaczy się, standardowa obsługa zdarzeń powinna pobierać tylko eventargument i nie musi w ogóle używać identyfikatorów.

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
}

Możesz użyć tego handlera z każdym - inline js:

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

jQuery:

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

lub standardowe ustawienie obsługi JS:

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

I nie musisz tego przepisywać dla każdego selectposiadanego elementu.

Przykładowy fragment:

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

Posługiwać się

document.getElementById("select_id").selectedIndex

Lub aby uzyskać wartość:

document.getElementById("select_id").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);
}

<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>

w alercie zobaczysz wartość INT wybranego indeksu, potraktuj zaznaczenie jako tablicę, a otrzymasz wartość

Zastanawiam się, że wszyscy pisali o tym valuei textmożliwość skorzystania z usługi <option>i nikt nie zasugerował label.

Więc ja labelrównież sugeruję , ponieważ jest obsługiwany przez wszystkie przeglądarki

Aby uzyskać value(tak samo jak sugerowali inni)

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

Aby dostać option text (tj. Komunikacja lub -Wybierz-)

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

LUB (Nowa sugestia)

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>

Uwaga: W powyższym kodzie HTML dla optionwartości 2, labelzwróci newText zamiast Communication

Również

Uwaga: nie można ustawić właściwości etykiety w przeglądarce Firefox (tylko powrót).

To stare pytanie, ale nie jestem pewien, dlaczego ludzie nie sugerowali używania obiektu zdarzenia do pobierania informacji zamiast ponownego przeszukiwania DOM.

Po prostu przejdź przez obiekt zdarzenia w swojej funkcji onChange, patrz przykład poniżej

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

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

Może być przydatny dla osób, które szukają tego dzisiaj, gdyby nie było to domyślne zachowanie 7 lat temu

jquery

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

html

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

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;

Próbowałem to wyjaśnić na podstawie własnej próbki, ale mam nadzieję, że to ci pomoże. Nie potrzebujesz onchange = "test ()" Proszę uruchomić fragment kodu, aby uzyskać wynik na żywo.

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>