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

【问题标题】：How do I get selected value from a bootstrap select drop down如何从引导选择下拉列表中获取选定的值
【发布时间】：2015-07-03 17:11:17
【问题描述】：

我试图从我的引导下拉菜单中获取选定的文本，而不是值，但我的 .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();
});

【问题讨论】：

试试这个 $( "#myselect option:selected" ).text();

标签： javascript jquery html twitter-bootstrap

【解决方案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>

【讨论】：

是 option:selected 一个 jquery 选择器还是一个 CSS 选择器？
api.jquery.com/selected-selector - 这是一个 jquery 扩展，不是 CSS 规范的一部分
感谢您的回答。如果我想要所有选定选项的逗号分隔字符串，你能告诉我该怎么做吗？比如'1,2,3,4'

【解决方案2】：

万一有人关心，我有另一个解决方案。我只是查看了文档中的论点。你可以做这样的事情（假设你已经设置了选项元素的值标签。：

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

见https://silviomoreto.github.io/bootstrap-select/options/

【讨论】：

【解决方案3】：

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 伪类 :selected。它与:checked 非常相似，我找不到:selected 的文档

【讨论】：

不是 css3 伪类；这是一个 jquery 扩展：api.jquery.com/selected-selector