0

Tengo este código y me gustaría saber cómo guardar los datos seleccionados en una variable para manipularlos como json.

Ya he logrado crear los valores a través de datos json.

function customMatcher(params, data) {
			//show childs if search with parent
		        data.parentText = data.parentText || "";
		        if ($.trim(params.term) === '') {
		            return data;
		        }


		        if (data.children && data.children.length > 0) {
		            var match = $.extend(true, {}, data);

		            for (var c = data.children.length - 1; c >= 0; c--) {
		                var child = data.children[c];
		                child.parentText += data.parentText + data.text;

		                var matches = customMatcher(params, child);

		                if (matches == null) {
		                    match.children.splice(c, 1);
		                }
		            }

		            if (match.children.length > 0) {
		                return match;
		            }

		            return customMatcher(params, match);
		        }

		        var original = (data.parentText + ' ' + data.text).toUpperCase();
		        var term = params.term.toUpperCase();

		        if (original.indexOf(term) > -1) {
		            return data;
		        }

		        return null;
		    }
	    
		$("#multisearch").select2({
		  language: "es",
		  closeOnSelect: false,
		  matcher: customMatcher,
		  placeholder: "Comienza tu búsqueda",
		  data: [{
		      id: 0,
		      text: 'Linea 1',
		      children: [{
		          id: 1,
		          text: 'San Pablo'
		        },
		        {
		          id: 2,
		          text: 'Pajaritos'

		        },
		        {
		          id: 3,
		          text: 'Las Rejas'
		        },
		        {
		          id: 4,
		          text: 'Ecuador'
		        }
		      ]
		    },
		    {
		      id: 5,
		      text: 'Linea 2',
		      children: [{
		          id: 6,
		          text: 'La Cisterna'
		        },
		        {
		          id: 7,
		          text: 'El Parrón'

		        },
		        {
		          id: 8,
		          text: 'Lo Ovalle'
		        },
		        {
		          id: 9,
		          text: 'Ciudad del niño'
		        },
		        {
		          id: 10,
		          text: 'Pajaritos'
		        }
		      ]
		    },

		  ]
		});
	
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select multiple id="multisearch" style="width:500px">
		</select>

Deseo poder capturar los valores seleccionados y almacenarlos en una variable con sus datos JSON

1 respuesta 1

1

Buenas tienes que tratar el select como a cualquier otro.

Para obtener los datos usa la function val() de Jquery

 $("#multisearch").val()

Espero te ayude saludos


Para obtener el valor del texto de cada item seleccionado usamos la función each() para iterar cada uno de los valores y agregarlos a un array en el que vamos a combinar el valor con el texto

Espero sea lo que buscas amigo

$("#obtenerDatos").click(function(){
  //console.log($("#multisearch").val())
  var arrayValor = $("#multisearch").val()
  var arrayNombres = []
  $(".select2-selection__rendered").find("li").each(function(index){
    
    if($(this).text()!=""){
    var valorAnterior = arrayValor[index]
    arrayValor[index] = {
      id:valorAnterior,
      valor:$(this).text().replace("×","")
    }
    }
    
  })
  
  console.log(arrayValor)
})

function customMatcher(params, data) {
			//show childs if search with parent
		        data.parentText = data.parentText || "";
		        if ($.trim(params.term) === '') {
		            return data;
		        }


		        if (data.children && data.children.length > 0) {
		            var match = $.extend(true, {}, data);

		            for (var c = data.children.length - 1; c >= 0; c--) {
		                var child = data.children[c];
		                child.parentText += data.parentText + data.text;

		                var matches = customMatcher(params, child);

		                if (matches == null) {
		                    match.children.splice(c, 1);
		                }
		            }

		            if (match.children.length > 0) {
		                return match;
		            }

		            return customMatcher(params, match);
		        }

		        var original = (data.parentText + ' ' + data.text).toUpperCase();
		        var term = params.term.toUpperCase();

		        if (original.indexOf(term) > -1) {
		            return data;
		        }

		        return null;
		    }
	    
		$("#multisearch").select2({
		  language: "es",
		  closeOnSelect: false,
		  matcher: customMatcher,
		  placeholder: "Comienza tu búsqueda",
		  data: [{
		      id: 0,
		      text: 'Linea 1',
		      children: [{
		          id: 1,
		          text: 'San Pablo'
		        },
		        {
		          id: 2,
		          text: 'Pajaritos'

		        },
		        {
		          id: 3,
		          text: 'Las Rejas'
		        },
		        {
		          id: 4,
		          text: 'Ecuador'
		        }
		      ]
		    },
		    {
		      id: 5,
		      text: 'Linea 2',
		      children: [{
		          id: 6,
		          text: 'La Cisterna'
		        },
		        {
		          id: 7,
		          text: 'El Parrón'

		        },
		        {
		          id: 8,
		          text: 'Lo Ovalle'
		        },
		        {
		          id: 9,
		          text: 'Ciudad del niño'
		        },
		        {
		          id: 10,
		          text: 'Pajaritos'
		        }
		      ]
		    },

		  ]
		});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select multiple id="multisearch" style="width:500px"  >
		</select>
    
      <button id="obtenerDatos" type="button" name="button">Obtener datos del select</button>

9
  • Solo una última duda amigo. Al obtener los datos, solo está mostrando el id de cada valor seleccionado. Me gustaría poder mostrar su id, el nombre del padre y el nombre del mismo seleccionado. Commented el 12 dic. 2017 a las 14:03
  • Listo amigo ya te agregue el nombre espero te ayude Commented el 12 dic. 2017 a las 14:49
  • Amigo, disculpa que incomode. Pero me gustaría saber como junto el id y el valor en un solo array, ya que los muestra en dos array distintos. Commented el 12 dic. 2017 a las 14:53
  • estan en el mismo array el valor es el id y el texto es el valor, ya lo cambio Commented el 12 dic. 2017 a las 15:17
  • ya lo cambie para que lo veas mejor Commented el 12 dic. 2017 a las 15:37

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.