How to manipulate a selected element in select2

0

I have this code and I would like to know how to save the selected data in a variable to manipulate them as json.

I have already managed to create the values through json data.

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>

I want to be able to capture the selected values and store them in a variable with their JSON data

    
asked by Arnell Vasquez C 11.12.2017 в 22:10
source

1 answer

0

Good you have to treat the select like any other.

To get the data, use the function val() of Jquery

 $("#multisearch").val()

I hope you help greetings

To obtain the text value of each selected item we use the function each() to iterate each one of the values and add them to an array in which we will combine the value with the text

I hope it's what you're looking for friend

$("#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>
    
answered by 11.12.2017 / 22:55
source