jquery - multiple - Configuración de valores iniciales en carga con Select2 con Ajax

select2 options

Question

Tengo controles Select2 configurados con Ajax (tienen tanto uno como múltiples). Estoy intentando tener algunos valores en la carga de la página, pero no puedo hacer que esto funcione. Mi código para select2 se da a continuación:

function AjaxCombo(element, url, multival ){  // multival = true or false
  multival = multival || false;
  $(element).select2({
   minimumInputLength: 2,
   multiple: multival,
   separator: ''|'',
   ajax: {
     url: url,
     dataType: ''json'',
     data: function (term, page) {
        var targetname = $(this).attr(''name'');
        var target = targetname.slice(targetname.indexOf("[")+1, targetname.indexOf("]"));
       return {
         targettype: "search",
         target: target,
         search: term
       };
     },
     results: function (data, page) {
       return { results: data };
     }
   }
 });
}
AjaxCombo(".ajaxselect", "includes/linkedcontrol.php", false);
AjaxCombo(".ajaxmultiselect", "includes/linkedcontrol.php", true);

El combo Ajax funciona bien, tengo problemas solo con la carga de valores iniciales. Intenté este código a continuación, pero no pude hacerlo funcionar:

initSelection : function (element, callback) {
    var elementText = $(element).attr(''data-initvalue'');
    callback(elementText);
}

Mi HTML de php se devuelve como a continuación:

<input name=''header[country]'' class=''ajaxselect''  data-initvalue=''[{"id":"IN","name":"India"}]'' data-placeholder=''Select Country'' value='''' />

Veo que los valores están llenos de php, solo mi jquery tiene problemas. Mis valores en el control aparecen como US | United States of America US | United States of America . Supongo que he editado la fuente select2 para obtener este formato como predeterminado sin usar la opción de formato.

¿Puede alguien ayudarme a completar los valores predeterminados? Gracias por adelantado.

EDITAR: Esta pregunta pertenece a la versión Select2 <4.0. Esta opción se eliminó de v4.0 y es mucho más simple ahora.

Answer 1

¡Quizás esto funcione para ti! Esto funciona para mí ...

initSelection: function (element, callback) {

            callback({ id: 1, text: ''Text'' });
}

Compruebe muy bien que el código está escrito correctamente, mi problema estaba en initSelection , tuve initselection

Answer 2

Cambiar el valor después de que la página cargue

$(''#data'').val('''').change();

Answer 3

En mi caso, el problema fue la prestación de la salida ... Así que usé el texto predeterminado si los datos de AJAX aún no están presentes.

  templateSelection: function(data) {
    return data.name || data.element.innerText;
  }

Answer 4

He añadido

initSelection: function (element, callback) {

      callback({ id: 1, text: ''Text'' });
}

Pero también

.select2(''val'', []);

al final.

Esto resolvió mi problema.

Answer 5

La función que está especificando como initSelection se llama con el value inicial como argumento. Entonces, si el value está vacío, la función no se llama.
Cuando especifique value=''[{"id":"IN","name":"India"}]'' lugar de data-initvalue , se llama a la función y la selección se puede inicializar.

Answer 6

Ravi, para 4.0.1-rc.1:

1. Agregue todos los elementos <option> dentro de <select> .
2. llama $element.val(yourarray).trigger("change"); después de la función de inicio select2 .

HTML:

<select name="Tags" id="Tags" class="form-control input-lg select2" multiple="multiple">
       <option value="1">tag 1</option>
       <option value="2">tag 2</option>
       <option value="3">tag 3</option>
 </select>

JS:

var $tagsControl = $("#Tags").select2({
        ajax: {
            url: ''/Tags/Search'',
            dataType: ''json'',
            delay: 250,
            results: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.text,
                            id: item.id
                        }
                    })
                };
            },
            cache: false
        },
        minimumInputLength: 2,
        maximumSelectionLength: 6
    });

    var data = [];
    var tags = $("#Tags option").each(function () {
        data.push($(this).val());
    });
    $tagsControl.val(data).trigger("change");

Este problema fue reportado pero aún así se abrió. https://github.com/select2/select2/issues/3116#issuecomment-146568753

Answer 7

Tarde :( pero creo que esto resolverá su problema.

 $("#controlId").val(SampleData [0].id).trigger("change");

Después del enlace de datos

 $("#controlId").select2({
        placeholder:"Select somthing",
        data: SampleData // data from ajax controll
    });
    $("#controlId").val(SampleData[0].id).trigger("change");

Answer 8

Una forma muy extraña de pasar datos. Prefiero obtener una cadena / objeto JSON del servidor y luego asignar valores y cosas.

De todos modos, cuando haces esto var elementText = $(element).attr(''data-initvalue''); estás obteniendo esto [{"id":"IN","name":"India"}] . Ese resultado debe PARSE como se sugiere arriba para que pueda obtener los valores reales para id ("IN") y nombre ("India"). Ahora hay dos escenarios, multiselección y valor único Select2.

Valores únicos:

$(element).select2({
    initSelection : function (element, callback) {
        var data = {id: "IN", text: "INDIA"};
        callback(data);
    }//Then the rest of your configurations (e.g.: ajax, allowClear, etc.)
});

Selección múltiple

$("#tags").select2({
    initSelection : function (element, callback) {
        var countryId = "IN"; //Your values that somehow you parsed them
        var countryText = "INDIA";

        var data = [];//Array

        data.push({id: countryId, text: countryText});//Push values to data array


        callback(data); //Fill''em
    }
});

¡AHORA AQUÍ ESTÁ EL TRUCO! Al igual que belov91 sugirió, DEBES poner esto ...

$(element).select2("val", []);

Incluso si es un Select2 simple o multivaluado. Por otro lado, recuerde que no puede asignar la función Select2 ajax a una etiqueta <select> , debe ser una <input> .

Espero que te haya ayudado a ti (o a alguien).

Adiós.

Answer 9

puedes usar lo siguiente

$(element).select2("data",[ { id: result.id, text: "جابر احمد الصباح" },
    { id: 2, text: "خليل محمد خليل" }]);

Answer 10

Actualizado a nueva versión:

Pruebe esta solución desde aquí http://jsfiddle.net/EE9RG/430/

$(''#sel2'').select2({
multiple:true,
ajax:{}}).select2({"data": 
     [{"id":"2127","text":"Henry Ford"},{"id":"2199","text":"Tom Phillips"}]});

Answer 11

var elem = $("#container").find("[name=elemMutliOption]");
for (var i = 0; i < arrDynamicList.length; i++)
{
   elem.find("option[value=" + arrDynamicList[i] + "]").attr("selected", "selected");
}
elem.select2().trigger("change");

Esto funcionará para las personas que están usando la misma vista para varias secciones en la página, con eso se dice que funcionará de la misma manera para establecer automáticamente los valores predeterminados en su página O mejor una página EDITAR.

El "FOR" pasa por la matriz que tiene opciones existentes ya cargadas en el DOM.