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

Question

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

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

Answer 2

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> 

这是基于:selected CSS3的伪类。这是非常相似的:checked，我找不到:selected

Answer 3

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

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

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