CODEWITHSUNDEEP
jquerybootstrap-select
D-W
D-W

Reputation: 5341

Bootstrap select - Get selected Value

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

Im using the above on my page to allow my user to select multiple values. However I want to simply display the Text of the selected value, but it is either not possible or i'm doing it all wrong? I get all the values and want the "selected" value As I want to display the result to the user later on...

<div class="form-group"><label class="col-lg-2 control-label">Service(s):</label>
    <div class="col-lg-9">
    <select class="selectpicker" multiple title="Select from the following..." data-width="100%" id="serviceList">
    </select></div></div>

    <script>
    var services = [{"value":"3e197221-e48b-44b8-a2aa-2054638f3bbc","label":"Service1","price":30.000000},{"value":"cd909812-ff6e-484b-96e3-c344ba20e140","label":"Service2","price":10.000000}];
    $('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
            var v = $(".selectpicker option:selected").val();
            var result =[];
            for (var i = 0; i < services.length; i++){
                // look for the entry with a matching value
                if (services[i].value === v) {
                    result.push(services[i].label);
                    console.log(services[i].label);
                }
            }
            for (i = 0; i < result; i++) {
                console.log(result[i]);
            }

        });
    </script>

Upvotes: 0

Views: 4777

Answers (2)

Jakob Eriksson
Jakob Eriksson

Reputation: 18767

You want to "pluck" all the labels from the array of selected options.

$('.selectpicker').on('changed.bs.select', function () {

    selectedServices = $.map($(this).find("option:selected"), function(o) { return o["label"]; });

}

Upvotes: 3

D-W
D-W

Reputation: 5341

This worked, seems long winded.

var selectedServices =[];
$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {



        for (var key in services) {
            if (key == clickedIndex) {
                console.log(key + ' is ' + services[key]);
                selectedServices.push(services[key].label);
                console.log(services[key].label);
            }

        }

Upvotes: 0

Related Questions