如何从引导选择下拉列表中获取选定值

时间:2015-04-24 22:34:34

标签: javascript jquery html twitter-bootstrap

我正在尝试从我的引导下拉列表中获取所选文本而不是值,但我的.text()语句返回一个字符串,其中包含所有值之间带有'\ n'的值。

这是我渲染的html

geo:

这是我的javascript,但selectedText返回'5-9 \ n10-15 \ n16-20 \ n20 +' 我想让它返回5-9或10-15等。

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

3 个答案:

答案 0 :(得分:32)

您可以使用$(this).find("option:selected").text()获取所选值的文字。

&#13;
&#13;
$('#SpaceAccommodation').change(function () {
    var selectedText = $(this).find("option:selected").text();
    
    $(".test").text(selectedText);
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:6)

Fiddle for you

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

的文档

答案 2 :(得分:1)

如果有人关心,我还有另一个解决方案。我只是查看了文档中的参数。你可以这样做(假设你已经设置了选项元素的值标签。:

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

请参阅https://silviomoreto.github.io/bootstrap-select/options/