Javascript 如何从引导选择下拉列表中获取选定的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29858641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get selected value from a bootstrap select drop down
提问by user1186050
I'm trying to get the selected text, not value, from my bootstrap drop down, but my .text() statement is returning a string that contains all the values with a '\n' in between.
我正在尝试从引导程序下拉列表中获取选定的文本，而不是值，但我的 .text() 语句返回一个字符串，其中包含中间带有 '\n' 的所有值。
Here is my rendered html
这是我渲染的 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>
Here is my javascript, but selectedText returns '5-9\n10-15\n16-20\n20+' I want it to return 5-9 or 10-15, etc..
这是我的 javascript，但 selectedText 返回 '5-9\n10-15\n16-20\n20+' 我希望它返回 5-9 或 10-15 等。
$('#SpaceAccommodation').change(function () {
var selectedText = $(this).text();
});
回答by Nick Bartlett
You can get the selected value's text with $(this).find("option:selected").text().
您可以使用 获取所选值的文本$(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>回答by J-Dizzle
$(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>
This is based on the css3 psuedo-class :selected. It's very similar to :checked, I couldn't find docs for :selected
这是基于 css3 psuedo-class :selected。它与 非常相似:checked，我找不到相关文档:selected
回答by coolboyjules
In case anyone cares, I've got another solution. I just looked at the arguments from the docs. You can do something like this (Assuming you've set the value tag of the option element.:
如果有人关心，我有另一个解决方案。我只是看了文档中的论点。你可以做这样的事情（假设你已经设置了选项元素的值标签。：
$('#type_dropdown')
.on('changed.bs.select',
function(e, clickedIndex, newValue, oldValue) {
alert(e.target.value);
});
});
See https://silviomoreto.github.io/bootstrap-select/options/
