Select2 multiple just choose a value

0

Good afternoon guys, I'm working with a multiple select2, the problem I have is that when inento changes the value of the element (which should be 3 items) this only chooses the first of the array, here my code:

Creation of the select2 element:

{{ Form::select('puntos_venta[]', $puntos, '', array('id' => 'puntos_venta', 'class' => 'form-control', 'style' => 'width: 100%;', 'multiple' => '')) }}'

How I change the values with javascript:

var puntos = "9,7,8"; //A manera de ejemplo
$('#puntos_venta').select2('val', puntos.toString().split(','));

For this case, then I only select the first element, that is, the one that has ID 9. I hope you can help me.

    
asked by Felipe Mendieta Perez 30.04.2017 в 20:42
source

1 answer

0

In your code all I see is missing is to trigger the trigger event so that the select2 is updated and I insert the values with $(selector).val(x) the way you do it ( $(selector).select2('val', x) ) never It worked for me.

Here the example speaks for itself:

var datos = [{"marcas":"LG","modelos":"[{\"id\":1,\"nombre\":\"LG-001\"},{\"id\":2,\"nombre\":\"LG-002\"},{\"id\":3,\"nombre\":\"LG-003\"}]"},{"marcas":"Samsung",
"modelos":"[{\"id\":4,\"nombre\":\"Sam-004\"},{\"id\":5,\"nombre\":\"Sam-005\"},{\"id\":6,\"nombre\":\"Sam-006\"}]"},{"marcas":"Sonyview","modelos":"[{\"id\":7,\"nombre\":\"Sony-007\"},{\"id\":8,\"nombre\":\"Sony-008\"},{\"id\":9,\"nombre\":\"Sony-009\"}]"},{"marcas":"VIT","modelos":"[{\"id\":10,\"nombre\":\"VIT-010\"},{\"id\":11,\"nombre\":\"VIT-011\"},{\"id\":12,\"nombre\":\"VIT-012\"}]"}];

$( document ).ready(function() {
	llenarSelect();
});

$(document).on('click', '#insertar', function() {
    var puntos = "2,9,5";
    var arraypuntos = puntos.split(',');
    $('#crear_marca_modelo').val(arraypuntos); //insertar los valores como un select normal
    $('#crear_marca_modelo').trigger("change"); //aca debes disparar el evento para que se actualice el select2 en la vista
});

function llenarSelect(){
  for(n in datos){
    $("#crear_marca_modelo").append('<optgroup label='+datos[n].marcas+'>');
    var modelos = JSON.parse( datos[n].modelos );
    for(x in modelos){
      $("#crear_marca_modelo").append('<option value='+modelos[x].id+'>'+modelos[x].nombre+'</option>');
    }
    $("#crear_marca_modelo").append('</optgroup>');
  }
  $("#crear_marca_modelo").select2().val(null).trigger("change");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.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>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

<select id="crear_marca_modelo" name="crear_marca_modelo" style="width: 100%;" multiple></select>
<br/><br/>
<button type="button" id="insertar" class="btn btn-primary botonCrear"><span class="fa fa-plus"></span><span class="hidden-xs"> Insertar</span></button>
    
answered by 01.05.2017 в 02:43