L'exemple de cet article décrit la méthode de récupération par jquery des données json pour obtenir une cascade de provinces et de villes. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Utiliser jQuery mobile comme cadre pour créer du Web mobile nécessite de réaliser la fonction de cascade de provinces et de villes. Le code spécifique est le suivant (il y a encore des domaines à optimiser) :
Code HTML :
Dans jQuery mobile, il y a un attribut de liste d'entrée, suivi de la balise
<input id="province" list="prvlist" placeholder="省/自治区/直辖市" onblur="changeProvince();"> <datalist id="prvlist"> </datalist> <input id="city" list="citylist" placeholder="市" onblur="changeCity();"> <datalist id="citylist"> </datalist> <input id="area" list="arealist" placeholder="区"> <datalist id="arealist"> </datalist>
code js :
code js, fonctions principales
1. Extrayez les données json et liez-les à la liste déroulante provinciale
2. Une fois l'entrée provinciale sélectionnée, la liste municipale sera automatiquement liée
3. La liste déroulante au niveau du district est la même qu'au niveau de la ville
<script> $(function () { getProvince(); //页面打开后,省级下拉列表自动绑定 }) //获取省份 function getProvince() { var Aid; var Afather; $.get('area_json0.txt', {}, function (data) { for (var i = 0; i < data.length; i++) { if (data[i].fatherId == 0) { Afather += '<option id=" ' + data[i].id + '" value="' + data[i].name + '">'; } } $("#prvlist").append(Afather); } , 'json'); } function changeProvince(){ var city; var prv_val=$("#province").val(); getJson(prv_val); } function changeCity(){ var city_val=$("#city").val(); getJsonArea(city_val); } function getJson(Name){ var cityID; $.get('area_json0.txt', {}, function (data) { for (var i = 0; i < data.length; i++) { if (data[i].name == Name) { cityID=data[i].id; } } setCity(cityID); } , 'json'); } function setCity(val){ var Acity; var $listcity=$("#citylist"); $.get('area_json0.txt', {}, function (data) { for (var n = 0; n < data.length; n++) { if (data[n].fatherId == val) { alert(data[n].id); Acity += '<option id=" ' + data[n].id + '" value="' + data[n].name + '">'; } } $listcity.append(Acity); } , 'json'); } function getJsonArea(Name){ var areaID; $.get('area_json0.txt', {}, function (data) { for (var i = 0; i < data.length; i++) { if (data[i].name == Name) { areaID=data[i].id; } } setArea(areaID); } , 'json'); } function setArea(Aval){ var Aarea; var $listarea=$("#arealist"); $.get('area_json0.txt', {}, function (data) { for (var m = 0; m < data.length; m++) { if (data[m].fatherId == Aval) { alert(data[n].id); Aarea += '<option id=" ' + data[m].id + '" value="' + data[m].name + '">'; } } $listarea.append(Aarea); } , 'json'); } </script>
Le code devrait être encore optimisé, alors enregistrez-le pour le moment.