JQuery crée un effet de lien entre les listes déroulantes de province et de ville_jquery

Pour créer des effets de liaison, si vous utilisez du JavaScript pur, vous avez souvent besoin d'une page auxiliaire pour enregistrer l'ensemble de résultats qui doit être actualisé, puis le restituer sur la page d'origine. Envisagez de regrouper automatiquement le contenu qui doit être actualisé dynamiquement après la liste déroulante précédente. Une fois la liste déroulante actuelle modifiée, toutes les listes déroulantes suivantes du même niveau sont effacées, puis le contenu actualisé est recollé. . Il est plus facile à mettre en œuvre avec JQuery. Le code est implémenté en utilisant l'effet de liaison entre la province et la ville comme exemple.

Le code de la page JSP est le suivant :

Copier le code Le code est le suivant :

< ;li id="base">

Lieu d'origine :

Tous

${provinceInfo.provinceName}

Le code JavaScript est le suivant :

Copier le code Codez comme suit :

functionfreshCity(){
if($('#provinceCode').find('option:selected').val( ) == ""){
$('#provinceCode').parent().nextAll('lable').remove(
return;
}
//Nom de la provincevar provinceName = $('#provinceCode ').find('option:selected').text();
provinceName = provinceName.substring(0,provinceName.length-4); une requête Json pour interroger l'option de la sous-liste déroulante data
$.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", {
proviceCode : $('#provinceCode').val()
}, function(data) {
// S'il y a des options enfants, créez une liste déroulante enfant
if(data != null){
// Supprimez tous les frères et sœurs après le dépôt -down box parent
$(' #provinceCode').parent().nextAll('lable').remove(); si la liste déroulante du niveau suivant existe et créez-la si elle n'existe pas
if($('#' childId).length == 0){
// Créez un

et ajoutez-le au

avec l'identifiant supplémentaire
$( "

").appendTo($('#base'));
}else{
//Vider le contenu de la liste déroulante enfant
$('#' childId) .empty();
}
// Parcourez la chaîne json et remplissez la liste déroulante enfant
$ .each(data.city, function(i, item) {
$(' #' childId).append(
"" item.nameAndCode
""
}); }
});
}


Obtenez le code de la ville en fonction de la province comme suit :

Copier le code

Le code est le suivant : public void getCitiesByProvinceCode (String proviceCode, HttpServletResponse réponse) lance JsonParseException, JsonMappingException , JSONEXCEPTION, IOEXception { PROVINCEINFO PROVINCEINFO = This.ProvincityInfoservice .getProvincobaby ("Code", ProvicCode; list & lt; cityInfo & gt; cityList = this.ProvincityInfoservice.getCityListByproperty ("Belongprovincid", "" BelongProvinceid "," " ); // Initialiser la chaîne Json à afficher

String cityJson = "";

// Parcourez la collection et construisez la chaîne json
if (cityList.size() > 0) {
cityJson = "{"city" :[";
// Épisser les sous-éléments interrogés
pour (int i = 0; i < cityList.size(); i ) {
CityInfo city = cityList.get(i);
String temp = "{"code":"" city.getCode()
"","nameAndCode":"" city.getName() "(" city.getCode () ")"
""}";
// S'il s'agit du dernier élément de la collection, collez le terminateur, sinon utilisez "," pour le séparer
if (i == cityList.size( ) - 1) {
cityJson = cityJson temp "]}";
} else {
cityJson = cityJson temp ",";
}
}
/ / Définir le jeu de caractères de sortie et tapez et affichez la chaîne json
response.setCharacterEncoding("UTF-8");
response.setContentType("json"); }