Как получить выбранное значение из выпадающего списка начальной загрузки

Я пытаюсь извлечь выделенный текст, а не значение, из моего бутстрапа, но мой оператор .text() возвращает строку, содержащую все значения с "\n" между ними.

Вот мой рендеринг html

<select class="form-control" id="SpaceAccommodation" name="YogaSpaceAccommodation">
    <option selected="selected" value="0">1-4</option>
    <option value="1">5-9</option>
    <option value="2">10-15</option>
    <option value="3">16-20</option>
    <option value="4">20+</option>
</select>

Вот мой javascript, но selectedText возвращает '5-9\n10-15\n16-20\n20 +' Я хочу, чтобы он вернул 5-9 или 10-15 и т.д.

$('#SpaceAccommodation').change(function () {

    var selectedText = $(this).text();
});

Ответ 1

Вы можете получить текст выбранного значения с помощью $(this).find("option:selected").text().

$('#SpaceAccommodation').change(function () {
    var selectedText = $(this).find("option:selected").text();
    
    $(".test").text(selectedText);
});

<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<select class="form-control" id="SpaceAccommodation" name="YogaSpaceAccommodation">
    <option selected="selected" value="0">1-4</option>
    <option value="1">5-9</option>
    <option value="2">10-15</option>
    <option value="3">16-20</option>
    <option value="4">20+</option>
</select>
<div class="test"></div>

Ответ 2

Скриншот для вас

 $(document).ready(function () {
     $('.chzn-select').change(function () {
         alert( $('.chzn-select option:selected').text());
     });
 });

<select id="second" class="chzn-select" style="width: 100px">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

Это основано на css3 psuedo-class :selected. Он очень похож на :checked, я не смог найти документы для :selected

Ответ 3

В случае, если кто-то заботится, у меня есть другое решение. Я просто посмотрел на аргументы из документов. Вы можете сделать что-то вроде этого (предположим, что вы установили тег значения элемента option.:

 $('#type_dropdown')
                .on('changed.bs.select',
                    function(e, clickedIndex, newValue, oldValue) {
                        alert(e.target.value);
                    });
        });

См. https://silviomoreto.github.io/bootstrap-select/options/