Durante el proceso de desarrollo web, al elegir provincias y ciudades, la relación entre provincias y ciudades es un pequeño caso de enlace secundario, que utiliza HTML, CSS, PHP, JS y
Solicitud asíncrona de Ajax
Primero, cree los archivos City.php y Province.php y connet.html, y escriba la estructura general del enlace secundario. El código HTML es el siguiente:
<Lelictar> Provincia: </etiqueta> <select id = "provincia"> <opción> Seleccione </opción> </select> <label> City: </etiqueta> <select id = "City"> <Opción> Seleccione </opción> </select>
El código JS y la solicitud AJAX son las siguientes:
<script> // Obtenga datos del servidor a través de AJAX VAR ProvinceElement = document.getElementById ("Province"); window.onload = function () {// Crear objeto central var xhr = getxhr (); // escucha xhr.onreadyStateChange = function () {if (xhr.readyState == 4 && xhr.s.status == 200) Provincia de Liaoning, Provincia de Shandong var data = xhr.esponsetext; // Process Data var arr = data.split (','); for (var i = 0; i <arr.length; i ++) {// <option> Seleccione </opción> var opt = document.createElement ("opción"); var text = document.createTextNode (arr [i]); opt.appendChild (texto); ProvinceElement.AppendChild (OPT);}}} // Crear una conexión xhr.open ("get", "Province.php"); // Enviar datos xhr.send (nulo);} // 2. El usuario selecciona una provincia diferente provincia.onchannchate = function () {// a. Borre la lista de la ciudad var cityElement = document.getElementById ("City"); var opts = cityElement.getElementsByTagName ("opción"); para (var i = 1; i <opts.length; i ++) {cityElement.removechild (opts [i]); i-;} // b. Obtenga el valor seleccionado por el usuario (Provincia) var provinceValue = this.Value; if (provinceValue == "por favor seleccione") {return false;} // c. Obtener la ciudad var xhr = getxhr (); xhr.open ("post", "city.php"); xhr.setRequestHeader ("content-type", "aplicación/x-www-form-urlencoded"); xhr.send ("province ="+provinceValue); xhr.onready stateChange = function () if (if (if (if (XHR.Reade 4 && xhr.status == 200) {var data = xhr.ResponsEtext; var arr = data.split (","); for (var i = 0; i <arr.length; i ++) {// <option> city </option> var opt = document.createElement ("opción"); var text = document.createTextNode (arr [i]); opt.appendChild (texto); CityElement.appendChild (opt);}}}} función getxhr () {var xhr = null; if (window.xmlhttprequest) {xhr = new xmlhttprequest ();} else {xhr = new ActiveXObject ("microsoft.xmlhttp");} xhr;} </script> Province.php El código es el siguiente: <? Php // Responder a la información de la provincia echo 'Jilin Province, provincia de lias, provincia de Shandong';El código City.php es el siguiente:
<?php// 1. Receive client request data $province = $_POST['province'];// 2. Provide different cities switch ($province){case 'Jilin Province':echo 'Changchun City, Songyuan City, Baishan City, Tonghua City, Liaoyuan City';break;case 'Liaoning Province':echo 'Shenyang City, Dalian City, Jinzhou City, Tieling City, Dandong City '; Break; Case' Shandong Province ': Echo' Jinan City, Qingdao City, Weihai City, Rizhao City, Dezhou City '; Break;}El diagrama final de la interfaz es el siguiente:
Lo anterior es un pequeño caso de enlace provincial y municipal en el segundo nivel introducido por el editor. Espero que te sea útil. Si desea saber más, ¡preste atención a Wulin.com!