Chaining mehrere Select2 zusammen

Question

Der Versuch, zwei verkettete Autobevölauswahlfelder zu machen select2 mit Plugin Die erste Auswahl enthält Länder Namen (statisch select) und die zweite zeigt die Zustände des gewählten Landes aus der ersten mein Code wählen ist

<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> 

Der JavaScript-Code

$(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 
         }); 
       } 
      }) 
    }); 
}); 

Die returened Ergebnisse in JSON

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

Ich habe viel nach einem Beispiel gesucht, um mir dabei zu helfen, aber nichts funktioniert alles, was ich brauche, ist, die Staaten des gewählten Landes anzuzeigen und an die zweite Auswahl zu übergeben, dass ich select2 v4 benutze .0 und jquery v2

Answer 1

Select2 A kann in der gleichen Weise verkettet werden, dass ein Standard <select> verkettet werden können. Das heißt, wenn der Wert der ersten Auswahl verkettet wird, wird die zweite Auswahl zurückgesetzt (im Allgemeinen zu einem Platzhalter) und die Optionen ändern sich im Allgemeinen ebenfalls.

Sie haben zwei Möglichkeiten, wie kann dies mit Select2 erfolgen:

1. Vorbelastung die Optionen für die zweite <select>, wenn sich der Wert ändert, und Select2 Griff lassen lokal zu suchen. Dies wäre ähnlich wie Sie es gerade tun, aber möglicherweise Probleme auftreten, wenn eine große Anzahl von Optionen in der zweiten <select> ausgewählt werden können.

   In Ihrem Fall sollte es innerhalb eines Landes nicht Tausende von "Zuständen" geben (für welchen Grad auch immer), daher sollte die lokale Suche kein allzu großes Problem darstellen.

2. Verwenden Sie die AJAX-Funktionalität von Select2 und übergeben Sie einen anderen Parameter als url basierend auf dem Wert der ersten <select>. Dies erfordert, dass Sie über einen dynamischen Endpunkt verfügen, der das Abrufen der Elemente für das zweite Objekt sowie das Filtern bei der Suche nach verarbeiten kann, sodass dies nicht immer machbar ist.

   Wenn Sie bereits über einen solchen Endpunkt verfügen, der das Filtern unterstützt, ist dies eine reaktionsfähigere Option, da der Benutzer nicht unbedingt auf alle Optionen warten muss, bevor er eine Option aus dem zweiten <select> auswählen kann.

Welche Option Sie weitgehend wählen, hängt davon ab, was Sie bereits eingerichtet haben, die Größe des Datensatzes, die Sie arbeiten mit (Select2 nicht gut mit Tausenden von Optionen umgehen kann), und die User Experience Sie wollen bereitstellen.

Der Code für die erste Option würde zu

$("#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"); 
}); 

ähnlich sein und kann unter folgenden jsbin getestet wird, reicht von Zahlen anstelle von Ländern und Staaten: http://jsbin.com/wigalivapi/1/edit?html,output

Beachten Sie, dass während das ist ähnlich dem Code, den Sie verwendeten, gibt es ein paar kleine Unterschiede, die Sie gefangen hätte.

1. Sie setzen dataType: "html", wenn Sie wirklich dataType: "json" erwartet werden. Sie geben JSON in Ihrer Antwort und nicht HTML zurück.

2. Sie löschen Ihre <select> nicht bevor Sie .select2({data:[]}) ein zweites Mal aufrufen. Select2 entfernt die <option>-Tags, die es generiert, nicht automatisch mit data, also müssen Sie das auf eigene Faust tun.

3. Wenn Sie den Wert der <select> ändern, sagen Sie nie Select2 darüber. Sie müssen das Ereignis change auf dem zweiten <select> erneut auslösen, nachdem Sie es geändert haben.

4. Der JSON, den Sie in Ihrer Frage angeben, scheint nicht gültig zu sein. Jetzt bin ich mir nicht sicher, ob das nur weil Sie es als Beispiel geben, aber ich würde Ihre JSON-Antwort mit JSONLint nur überprüfen, um sicherzustellen, dass es gültig ist.

Der Code für die zweite Option würde zu

$("#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 
     } 
    } 
    } 
}); 

ähnlich sein, und dies kann unter folgenden jsbin getestet werden, die die Reaktion mit einer Reihe von Zahlen (ähnlich die anderen verspottet Beispiel): http://jsbin.com/gihusohepe/1/edit?html,output

Answer 2

Sie haben Kommas in JSON-Antwort verpasst.

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 
});