How do I get selected value from a bootstrap select drop down

Question

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();
});

Try this $( "#myselect option:selected" ).text(); – Manish Shukla Apr 24 '15 at 22:39 — Manish Shukla, Apr 24 '15 at 22:39

Nick Bartlett · Answer 1 · 2017-08-22T19:24:28.327

45

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>

edited Aug 22 '17 at 19:24

answered Apr 24 '15 at 22:37

Nick Bartlett

4,865
2
24
37

is `option:selected` a jquery selector or a CSS selector ? – Alexander Solonik Apr 24 '15 at 22:40
1

https://api.jquery.com/selected-selector/ - it's a jquery extension, not a part of the CSS spec – Nick Bartlett Apr 24 '15 at 22:49
1

thanks for the answer. can you tell me what should I do if I want a comma separated string of all selected options? like '1,2,3,4' – always-a-learner Jun 21 '17 at 08:23

score 6 · Answer 2 · answered Apr 24 '15 at 22:42

6

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>

This is based on the css3 psuedo-class :selected. It's very similar to :checked, I couldn't find docs for :selected

answered Apr 24 '15 at 22:42

J-Dizzle

3,176
6
31
49

Not a css3 psuedo-class; it's a jquery extension: https://api.jquery.com/selected-selector/ – Nick Bartlett Apr 24 '15 at 22:50

score 1 · Answer 3 · answered Sep 27 '16 at 21:19

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/

How do I get selected value from a bootstrap select drop down

3 Answers3

Linked