how do I get the select input-field option from materialize that have been selected with jquery?

Question

how do I get the select input-field option from materialize that have been selected with jquery?

Navigation

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

0

I need to grab the options of that select materialize that are practically a checkbox to be able to add them to a collapsible so that they are visualized, but I need to know how to get those "selected options" with jquery or if it is with javascript, there is no problem either

<div class="input-field col s5 editable" >
    <select multiple>
	   <option value="" disabled selected></option>
	   <option value="1">codo</option>
	   <option value="2">hombros</option>
	   <option value="3">rodillas</option>
	   <option value="4">pies</option>
    </select>
</div>

jquery html materialize

asked by Carlos 28.09.2018 в 20:53

source

3 answers

Select and de-select radio inputs with js How to get the id of an object that I just registered?

score 0 · Answer 1

This may help you

<div class="input-field col s5 editable" >
    <select multiple id="sel">
       <option value="" disabled selected></option>
       <option value="1">codo</option>
       <option value="2">hombros</option>
       <option value="3">rodillas</option>
       <option value="4">pies</option>
    </select>
</div>
<script>
    var val = $("#sel").val();
</script>

score 0 · Answer 2

The simplest way and with Jquery (which is what you put in the first place and I suppose what you require as an ideal) would be to give an ID to your select

HTML

<div class="input-field col s5 editable" >
    <select id="seleccionable" multiple>
       <option value="" disabled selected></option>
       <option value="1">codo</option>
       <option value="2">hombros</option>
       <option value="3">rodillas</option>
       <option value="4">pies</option>
    </select>
</div>

JQuery

$("#seleccionable").val() //esto regresa un array

That array that you can iterate with forEach to put it in collapsible

JQuery

var select =  $("#seleccionable").val() ;

select.forEach( element => {

$("#collapsible").append(element);

})

score 0 · Answer 3

From what you say you can intuit that you are using select:option of materialize with the option multiple , that is let you choose more than one, for what you ask you can try this:

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

  $("#prueba").formSelect();
  
  $("#obtener").on("click", () => {
    
    let instancia = M.FormSelect.getInstance($("#prueba"));
    let valores = instancia.getSelectedValues(); 
    console.log(valores);
    
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <div class="input-field col s5" >
        <select id="prueba" multiple>
           <option value="" disabled selected></option>
           <option value="1">codo</option>
           <option value="2">hombros</option>
           <option value="3">rodillas</option>
        </select>
    </div>

    <button id="obtener">Obtener checkeados</button>

I hope you serve