Get values from a multiple select (Materialize)

Question

Good morning. My problem is that I can’t or don’t know how to get the values of a Select Múltiple of Materialize V 0.100.2, if anyone can explain or help me, please, I’ll take it, but it won’t give me back anything !!:

$(document).ready(() => {
    $("select").material_select();
    $(".jsBtnSaveValuesNotificationsShedule").on("click", () => {
        console.log($(".jsSelectedSchedule").val());
    });
});

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="row">
    <div class="input-field col s6">
        <select class="jsSelectedSchedule" name="jsNameSelectedSchedule" multiple>
            <option value="" selected disabled>Seleccione</option>
            <option value="1">Opcion 1</option>
            <option value="2">Opción 2</option>
        </select>
        <label>Selecciona el tipo de horario</label>
    </div>
</div>
<div class="row">
    <div class="col m4 offset-m4 s4 offset-s4">
        <a class="btn waves-effect waves-light jsBtnSaveValuesNotificationsShedule">Obter</a>
    </div>
</div>

Answer 1

Use a generic Jquery iterator function ($.each), which can be used for iteration of objects and matrices.

<script type="text/javascript">
$(document).ready(() => {
    $("select").material_select();
    $(".jsBtnSaveValuesNotificationsShedule").on("click", () => {
        $.each($(".jsSelectedSchedule option:selected"), function() {
            console.log($(this).val())
        });
    });
});
</script>

Answer 2

First you have to remove the attribute Selected at first option then create a array to save the selected options, as in the example below:

$(function() {

  $("select").material_select();

  $(".jsBtnSaveValuesNotificationsShedule").on("click", () => {

    let opcoes = [];
    i = 0;

    $(".jsSelectedSchedule option:selected").each(function() {
      opcoes[i] = $(this).val();
      i++;
    });

    console.log(opcoes);

  });

});

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="row">
  <div class="input-field col s6">
    <select class="jsSelectedSchedule" name="jsNameSelectedSchedule" multiple>
      <option value="" disabled>Seleccione</option>
      <option value="1">Opcion 1</option>
      <option value="2">Opción 2</option>
    </select>
    <label>Selecciona el tipo de horario</label>
  </div>
</div>
<div class="row">
  <div class="col m4 offset-m4 s4 offset-s4">
    <a class="btn waves-effect waves-light jsBtnSaveValuesNotificationsShedule">Obter</a>
  </div>
</div>

To take the values as string just do opcoes.join(,)

Answer 3

Try it this way:

$(document).ready(() => {
      $("select").material_select();
      $(".jsBtnSaveValuesNotificationsShedule").click(function(){

          var ArrayValores = [];
          select = $('.jsSelectedSchedule');
          ul = select.prev();

          ul.children('li').toArray().forEach(function (li, i) {
            if ($(li).hasClass('active')) {
              ArrayValores.push(select.children('option').toArray()[i].value);
            }
          });

            select.val(ArrayValores);

            console.log($('select').val())
        });
     });

It was the best I could do, the output will be in array format.

Answer 4

I was able to solve the problem, based on the answer of Leandrade and colleagues, what I did was change the way I access the element select, that is, I got the values from name instead of accessing it through classe, that is to say: $('select [name^= "jsNameSelectedSchedule"]').val(), what does ^, is to go through all the options corresponding to that name, similar to the method .each(). I leave the solution in case someone has this problem in the future, thanks for the help!:

$(document).ready(() => {
  $("select").material_select();
  $(".jsBtnSaveValuesNotificationsShedule").on("click", () => {
    console.log($('select[name^="jsNameSelectedSchedule"]').val());
  });
});

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<div class="row">
  <div class="input-field col s6">
    <select class="jsSelectedSchedule" name="jsNameSelectedSchedule" multiple>
      <option value="" selected disabled>Seleccione</option>
      <option value="1">Opcion 1</option>
      <option value="2">Opción 2</option>
    </select>
    <label>Selecciona el tipo de horario</label>
  </div>
</div>
<div class="row">
  <div class="col m4 offset-m4 s4 offset-s4">
    <a class="btn waves-effect waves-light jsBtnSaveValuesNotificationsShedule">Obtener</a>
  </div>
</div>