concatenamento Select2 multipla insieme

Question

Cercando di fare due auto incatenato popolano selezionare i campi utilizzando select2 Plugin La prima selezionare contiene paesi nomi (statica select) e la seconda mostra gli stati del paese scelto dalla prima selezionare il mio codice è

<select id="country" name="country" size="1" class=" form-control"> 
<option></option> 
<option value="1">USA</option> 
<option value="2">Untied Kingdom</option> 
<option value="3">France</option> 
etc........ 
</select> 
<select id="states" name="states" size="1" class="form-control"> 
<option></option> 
</select> 

il codice JavaScript

$(document).ready(function() { 
    $('#country').select2({ 
     placeholder: 'Select Country', 
     allowClear: true 
    }); 
    $('#state').select2({ 
     placeholder: 'Select State', 
     allowClear: true 
    }); 
    $('#country').change(function() { 
      var selectedCountries = $('#countryoption:selected').val(); 
      var selectedCountries = 'id='+ selectedCountries; 
      $.ajax({ 
       type: 'POST', 
       url: 'http://localhost/CodeIgniter/countries/get_state/', 
       dataType: 'html', 
       data: selectedCountries, 
       }).done(function(data) { 
         data = $.map(data, function(item) { 
          return { id: item.id, text: item.name }; 
         }); 
         $('#state').select2({ 
          data: data 
         }); 
       } 
      }) 
    }); 
}); 

I risultati returened in JSON

{"id":"1","text":"Chigaco"}{"id":"4","text":"Albama"}{"id":"2","text":"Tulsa"} etc........... 

Ho cercato molto per un esempio per aiutarmi con questo, ma niente di tutto ciò di cui ho bisogno è di mostrare gli stati del paese scelti nella prima selezione e passare alla seconda selezione conosciuta che sto usando select2 v4 .0 e jquery v2

Answer 1

Un Select2 possono essere concatenati nello stesso modo che una norma <select> possono essere concatenati. Ciò significa che quando il valore della prima selezione viene concatenato, la seconda selezione viene reimpostata (generalmente su un segnaposto) e le opzioni generalmente cambiano.

Sono disponibili due opzioni per come questo può essere fatto con Select2:

1. precarico le opzioni per la seconda <select> quando il valore cambia, e lasciare che la maniglia Select2 ricerca a livello locale. Questo sarebbe simile al modo in cui si sta tentando di farlo, ma potrebbero verificarsi problemi quando è disponibile un gran numero di opzioni che possono essere selezionate nel secondo <select>.

   Nel tuo caso, non ci dovrebbero essere migliaia di "stati" (per qualsiasi grado di stato) all'interno di un paese, quindi la ricerca locale non dovrebbe essere un problema.

2. Utilizzare la funzionalità AJAX di Select2 e immettere un parametro diverso come url da utilizzare in base al valore del primo <select>. Ciò richiede che tu abbia un endpoint dinamico in grado di gestire il recupero degli elementi per la seconda selezione e di filtrarli durante la ricerca di, quindi non è sempre possibile.

   Se si dispone già di un endpoint come questo che supporta il filtro, questa è un'opzione più reattiva in quanto l'utente non deve necessariamente attendere il recupero di tutte le opzioni prima di poter selezionare un'opzione dal secondo <select>.

Cosa opzione scelta in gran parte dipende da quello che hai già stata impostata, la dimensione del set di dati che si sta lavorando con (Select2 non gestisce bene con migliaia di opzioni), e l'esperienza dell'utente che si desidera fornire.

Il codice per la prima opzione sarebbe simile a

$("#first").select2({ 
    placeholder: 'Select a number range' 
}); 

$("#second").select2({ 
    placeholder: 'Select a number' 
}); 

$("#first").on("change", function() { 
    $("#second option[value]").remove(); 

    var newOptions = []; // the result of your JSON request 

    $("#second").append(newOptions).val("").trigger("change"); 
}); 

e può essere provato alle seguenti jsbin, utilizzando intervalli di numeri al posto dei paesi e gli stati: http://jsbin.com/wigalivapi/1/edit?html,output

Nota che, mentre questo è simile al codice che stavi usando, ci sono alcune piccole differenze che ti avrebbero catturato.

1. Si sta impostando dataType: "html" quando si è veramente aspettate dataType: "json". Stai restituendo JSON nella tua risposta, non in HTML.

2. Non si sta pulendo il proprio <select> prima di chiamare .select2({data:[]}) una seconda volta. Select2 non rimuove automaticamente i tag <option> che genera con data, quindi è necessario farlo da soli.

3. Quando si modifica il valore di <select>, non viene mai indicato a Select2. È necessario riattivare l'evento change sul secondo <select> dopo averlo modificato.

4. Il JSON fornito nella domanda non sembra essere valido. Ora non sono sicuro che sia solo perché lo stai dando come esempio, ma controllerò la tua risposta JSON con JSONLint solo per assicurarti che sia valida.

Il codice per la seconda opzione sarebbe simile a

$("#first").select2({ 
    placeholder: 'Select a number range' 
}); 

$("#second").select2({ 
    placeholder: 'Select a number', 
    ajax: { 
    url: http://localhost/CodeIgniter/countries/get_state/', 
    type: 'POST', 
    data: function (params) { 
     return { 
     id: $("#first").val(), 
     search: params.term 
     } 
    } 
    } 
}); 

E questo può essere provato alle seguenti jsbin, che fa il verso di risposta utilizzando un intervallo di numeri (simile all'altro esempio): http://jsbin.com/gihusohepe/1/edit?html,output

Answer 2

hai perso virgole in risposta JSON.

http://jsfiddle.net/jEADR/1570/

var data = [{"id":"1","text":"Chigaco"},{"id":"4","text":"Albama"},{"id":"2","text":"Tulsa"}]; 
var data2=[]; 
$.map(data, function(item) { 
     data2.push({ id: item.id, text: item.text }); 
}); 
$('#state').select2({ 
     data: data2 
});