如何從引導選擇下拉列表中選擇值

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/