1

Bom dia. Meu problema é que eu não posso ou não sei como obter os valores de um Select Múltiple do Materialize V 0.100.2, se alguém puder me explicar ou me ajudar, por favor, eu levo isso, mas isso não me devolve nada !!:

$(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>

4 Respostas 4

3

Utilize uma função de iterador genérico do Jquery ($.each), que pode ser usada para iteração de objetos e matrizes.

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

Primeiro terá que retirar o atributo selected na primeira option depois é só criar um array para ir guardando as opções selecionados, como no exemplo abaixo:

$(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>

Para pegar os valores como string é só fazer opcoes.join(,)

2
  • Obrigado LeAndrade, funciona. E você acabou de me dar uma idéia sobre como percorrer as opções sem um each () para não ter um código longo, vou tentar fazer e postar a solução. Commented 10/05/2019 às 14:28
  • Legal que deu certo.
    – LeAndrade
    Commented 10/05/2019 às 14:30
1

Tenta assim:

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

Foi o melhor que consegui fazer, o output vai ser em formato de array.

0

Consegui resolver o problema, com base na resposta do LeAndrade e dos colegas, o que fiz foi alterar a forma como eu acesso o elemento select, ou seja, obtive os valores pelo name ao invés de acessá-lo pela classe, ou seja: $('select [name^= "jsNameSelectedSchedule"]').val(), o que faz ^, é percorrer todas as opções correspondentes a esse name, similar ao método .each(). Deixo a solução no caso de alguém ter esse problema no futuro, obrigado pela ajuda!:

$(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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .