JQuery erzeugt einen Verknüpfungseffekt der Dropdown-Boxen für Provinz und Stadt_jquery

Um Verknüpfungseffekte zu erzielen, benötigen Sie bei Verwendung von reinem JavaScript häufig eine Hilfsseite, um die zu aktualisierende Ergebnismenge zu speichern und sie dann auf der Originalseite zu rendern. Ziehen Sie in Betracht, den Inhalt, der dynamisch aktualisiert werden muss, nach der Änderung des aktuellen Dropdown-Felds automatisch zusammenzufügen. Alle nachfolgenden Dropdown-Felder auf derselben Ebene werden gelöscht und der aktualisierte Inhalt wird erneut zusammengefügt . Die Implementierung ist mit JQuery einfacher. Der Code wird am Beispiel des Provinz- und Stadtverknüpfungseffekts implementiert.

Der JSP-Seitencode lautet wie folgt:

Code kopierenDer Code lautet wie folgt:

< ;li id="base">

Herkunftsort:

="provinceCode" onchange="refreshCity()">
All ">
${provinceInfo.provinceName}


label>



Der JavaScript-Code lautet wie folgt:

Code kopieren Code wie folgt:

function restartCity(){

if($('#provinceCode').find('option:selected').val( ) == ""){
$('#provinceCode').parent().nextAll('lable').remove();
return;
//Provinzname
var ProvinceName = $('#provinceCode ').find('option:selected').text();
provinceName = ProvinceName.substring(0,provinceName.length-4); eine JSON-Anfrage zum Abfragen der Optionsdaten des Unter-Dropdown-Felds
}, function(data) {
// Wenn es untergeordnete Optionen gibt, erstellen Sie ein untergeordnetes Dropdown-Feld
if(data != null){
// Löschen Sie alle Geschwister nach dem Ablegen -down box parent
$(' #provinceCode').parent().nextAll('lable').remove();
var childId = "city"; ob das Dropdown-Feld der nächsten Ebene vorhanden ist und es erstellen, wenn es nicht vorhanden ist
if($('#' childId).length == 0){
// Erstellen Sie ein

und erstellen Sie ein und mit der ID extra
$( " hinzufügen

").appendTo($('#base'));
}else{
//Inhalt des untergeordneten Dropdown-Felds leeren
$('#' childId) .empty();
}
// Durchlaufen Sie die JSON-Zeichenfolge und füllen Sie das untergeordnete Dropdown-Feld aus
$ .each(data.city, function(i, item) {
$(' #' childId).append(
"" item.nameAndCode
""});
}
});
}


Erhalten Sie den Stadtcode basierend auf der Provinz wie folgt:




Code kopieren

Der Code lautet wie folgt:

public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse Response) throws JsonParseException, JsonMappingException , JSONEXCEPTION, IOEXception { PROVINCEINFO PROVINCEINFO = This.ProvincityInfoservice .getProvincobaby ("Code", ProvicCode; list & lt; cityInfo & gt; cityList = this.ProvincityInfoservice.getCityListByproperty ("Belongprovincid", "" BelongProvinceid "," " ); // Initialisieren Sie die Json-Zeichenfolge ausgegeben werden String cityJson = "" // Durchlaufen Sie die Sammlung und erstellen Sie den JSON-String if (cityList.size() > 0) {

cityJson = "{"city" :[";

// Die abgefragten Unterelemente zusammenfügen
for (int i = 0; i CityInfo city = cityList.get(i);
String temp = "{"code":"" city.getCode()
"","nameAndCode":"" city.getName() "(" city.getCode () ")"
""}";
// Wenn es das letzte Element in der Sammlung ist, verbinden Sie das Abschlusszeichen, andernfalls verwenden Sie ",", um es zu trennen
if (i == cityList.size( ) - 1) {
cityJson = cityJson temp "]}";
} else {
cityJson = cityJson temp ",";
}
}
/ / Legt den Ausgabezeichensatz fest und geben Sie die JSON-Zeichenfolge
response.setCharacterEncoding("UTF-8");
response.getWriter().print(cityJson ); ein }