Всегда получаю первое значение в select

Question

Есть код:

<select name="cities" class ="order-input cities-names" id="city">
    <option value="gd1">Город 1</option>
    <option value="gd2">Город 2</option>
    <option value="gd3">Город 3</option>
    <option value="gd4">Город 4</option>
    <option value="gd5">Город 5</option>
    <option value="gd6">Город 6</option>
    <option value="other">Другой</option>
</select>

Мне надо выбранный город поместить в span. Я достаю значение выбранного option и помещаю в span с id = user_city_label:

var selectedCity = $("#city option:selected").text();
    document.getElementById("user_city_label").innerHTML = selectedCity;

Но приходит всегда значение первого option, то есть Город 1. Что я делаю не так?

Answer 1

Вам необходимо отслеживать изменение поля select.
Сейчас у Вас происходит получение данных при загрузке страницы.
Пример:

    $('#city').on('change', function () {
        var selectedCity = $("#city option:selected").text();
        document.getElementById("user_city_label").innerHTML = selectedCity;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cities" class ="order-input cities-names" id="city">
    <option value="gd1">Город 1</option>
    <option value="gd2">Город 2</option>
    <option value="gd3">Город 3</option>
    <option value="gd4">Город 4</option>
    <option value="gd5">Город 5</option>
    <option value="gd6">Город 6</option>
    <option value="other">Другой</option>
</select>
<span id="user_city_label"></span>

Так же если Вы работаете в jquery, лучше делайте всё через него, не смешивая js и jquery.
Так Вам будет проще работать в дальнейшем.
Пример на jquery:

    $('#city').on('change', function () {
        var selectedCity = $("#city option:selected").text();
        $('#user_city_label').text(selectedCity);
    }).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cities" class ="order-input cities-names" id="city">
    <option value="gd1">Город 1</option>
    <option value="gd2">Город 2</option>
    <option value="gd3">Город 3</option>
    <option value="gd4">Город 4</option>
    <option value="gd5">Город 5</option>
    <option value="gd6">Город 6</option>
    <option value="other">Другой</option>
</select>
<span id="user_city_label"></span>

БЛОГ НА HUSL

Всегда получаю первое значение в select

Ответы (1 шт):