0

mi problema es que no puedo o no se cómo obtener los valores de un select mútiple de Materialize V 0.100.2, si alguien pudiera explicarme o ayudarme, por favor, llevo esto, pero no me retorna nada!!:

$(document).ready(() => {

  $("select").material_select();

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

    console.log($(".jsSelectedSchedule").val());

  });

});
<!--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="" 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>

2 respuestas 2

2

Logré solucionar el problema, lo que hice fue cambiar la forma en la que accedo al elemento select, es decir, obtuve el los valores por el name en lugar de acceder a él por la clase, es decir: $('select[name^="jsNameSelectedSchedule"]').val() dejo la solución por si alguién presenta este inconveniente en el futuro:

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

1

El atributo "name" del select debe finalizar con "[]". De esta manera:

<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>
1
  • Que tal Alan, gracias por la respuesta, lo intenté, pero no me sirvió, siempre me devuelve unas comillas dobles en el console.log(). Qué crees que pueda ser? Commented el 10 may. 2019 a las 13:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.