pobranie wartości z select2

Question

Cześć, mam problem z pobraniem wartości z selecta. Chce to zrobić w JavaScript (nie jQuery). Jest wielokrotnie zagnieżdżony i może to tego wina

<div class="form-group">
            <label class="col-sm-3 control-label mapsvg-filter-label">Select country</label>
        <div class="col-sm-9">
            <select name="regions" class="form-control select2-hidden-accessible" style="width: 100%; display: block;" data-parameter-name="regions" tabindex="-1" aria-hidden="true">

                    <option value="" selected="">country</option>
                        <option value="Afganistan">Afganistan</option>
                        <option value="Albania">Albania</option>
                        <option value="Algeria">Algeria</option>

            </select><span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-regions-go-container"><span class="select2-selection__rendered" id="select2-regions-go-container" title="Russia"><span class="select2-selection__clear">×</span>Russia</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
        </div>
    </div>

document.getElementsByClassName('.select2-hidden-accessible').onchange = function() {
    console.log(this.value);
}

 

Answer 1

Zmień kod JavaScript na:

document.getElementsByClassName('select2-hidden-accessible')[0].onchange = function() {
    console.log(this.value);

 

Comments

w konsoli działa ale kiedy wklejam do kodu to mam komunikat:

Uncaught TypeError: Cannot set property 'onchange' of undefined at HTMLDocument

---

Jak w stosunku do rzeczonego elementu select leży kod JavaScript? Przed nim czy po?

---

Jest to trochę pokręcone bo ten select jest z pluginu z Wordpressa (MapSVG). Mam swój plik JS i plik JS, który generuje ten plugin. Umieściłam kod w obu miejscach i ten sam błąd.

---

Z komunikatu wynika, że twój skrypt nie znalazł elementu.

---

@Klaudiaaa, możesz to sprawdzić w DOM Inspectorze na wczytanej stronie.

Answer 2

Spróbuj może tak:

document.querySelector('.select2-hidden-accessible').onchange = function() {
  console.log(this.value);
}

lub

document.querySelector('.select2-hidden-accessible').onchange = ({target}) => {
  console.log(target.value);
}