bootstrap-select returns the stuck text of what is selected

Question

bootstrap-select returns the stuck text of what is selected

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I have a doubt .. I am working with bootstrap-select for the first time, when selecting more than one option on the screen, I show them separated by a comma, for example: ONE, TWO, THREE, FOURTH and when getting the value from the js file with the command $ ("# combobox option: selected"). text (); it returns the UNODOSTRESCUATRO value, how can I get it as it shows on the screen?

This is the code of the select:

<select class="selectpicker" multiple name="combobox " id="combobox " >
                        <option value="1">UNO</option>
                        <option value="2">DOS</option>
                        <option value="3">TRES</option>
                        <option value="4">CUATRO</option>

                    </select>

javascript jquery bootstrap

asked by Richard 14.11.2018 в 21:01

source

3 answers

understand a method with closets (), next and find () $ (this) returns undefinied in select event change

score 1 · Answer 1

You could use the change feature of JQuery for that, like this:

$('.selectpicker').on('change', function(){
   var selected = []
   selected = $(this).val()
})

$(document).ready(function(){
  $('.selectpicker').selectpicker();
  $('.selectpicker').on('change', function(){
    var selected = []
    selected = $(this).val()
    alert(selected);
  })
})

.dropdown:hover > .dropdown-menu {
display: block;
margin: 0px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css" rel="stylesheet"/>

<div class="container mt-2">
  <select class="selectpicker" multiple>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

score 1 · Answer 2

If you make $('#combobox').val() you will return a vector with each value of each selected option, but if you need the texts of the selected items you could use the jQuery map to go through them and get their text, and then put them together all with a join.

Here I leave an example that you can run and see it.

Good luck!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple name="combobox" id="combobox">
  <option value="1">UNO</option>
  <option value="2">DOS</option>
  <option value="3">TRES</option>
  <option value="4">CUATRO</option>
</select>
<br/>
<button onclick="verValor()">Prueba</button>
<script>
  function verValor() {
    var valores = $.map(
      $('#combobox option:selected'),
      function(o, i) { return $(o).text(); });
    alert(valores.join(', '));
  }
</script>

score 0 · Answer 3

You can also put the onchange function in the element:

<select class="selectpicker" multiple name="combobox " id="combobox " onchange="myfunction(this.value)" >
                    <option value="1">UNO</option>
                    <option value="2">DOS</option>
                    <option value="3">TRES</option>
                    <option value="4">CUATRO</option>

                </select>
           <script>
                function myfunction(val){
                    console.log(val);
                }
            </script>