如何从引导选择下拉菜单中获取选定的值 [英] How do I get selected value from a bootstrap select drop down

问题描述

我试图从我的引导程序下拉菜单中获取选定的文本，而不是值，但是我的.text（）语句返回一个字符串，其中包含所有带有'\ n'的值。

这里是我提供的html

 < select class =form-控制id =SpaceAccommodationname =YogaSpaceAccommodation> 
< option selected =selectedvalue =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\\\
10-15\\\
16- 20 \\\
20 +'
我希望它返回5-9或10-15等。

  $ （'#SpaceAccommodation'）。change（function（）{
 
 var selectedText = $（this）.text（）; 
}）; 
  

解决方案

您可以使用 $（this）.find（option：selected）。text（）。

data-lang =jsdata-hide =falsedata-console =falsedata-babel =false>

  $（'＃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-controlid =SpaceAccommodation NAME = YogaSpaceAccommodation > < option selected =selectedvalue =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>

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.

Here is my rendered 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..

$('#SpaceAccommodation').change(function () {

    var selectedText = $(this).text();
});

解决方案

You can get the selected value's text with $(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>

这篇关于如何从引导选择下拉菜单中获取选定的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！