Durante o processo de desenvolvimento da Web, ao escolher províncias e cidades, a relação entre províncias e cidades é um pequeno caso de ligação secundária, que usa HTML, CSS, PHP, JS e
Solicitação assíncrona do Ajax
Primeiro, crie os arquivos City.php e Província.php e Connet.html e escreva a estrutura geral da ligação secundária. O código HTML é o seguinte:
<Boel> Província: </celt> <select id = "Província"> <pution> Por favor, selecione </pption> </leclect> <belt> cidade: </celt> <select ID = "City"> <pution> Selecione </pption> </leclect>
O código JS e a solicitação de Ajax são os seguintes:
<SCRIPT> // Obtenha dados do servidor através do Ajax var ProvinceElement = document.getElementById ("Província"); window.onload = function () {// crie objeto núcleo var xhr = getxhr (); // ouvido xhr.onreadystatechange = function () {if (xhr.readystate ==4 4 & Província de Liaoning, Província de Shandong var dados = XHR.ResponseText; // Processar dados var Arr = data.split (','); for (var i = 0; i <arr.length; i ++) {// <pution> Selecione </pption> var opt = document.createElement ("option"); var text = document.createTextNode (arr [i]); opt.appendChild (texto); ProvinceElement.AppendChild (Opt);}}} // Crie uma conexão xhr.open ("get", "provide.php"); // envie dados xhr.send (null);} // 2. O usuário seleciona uma província diferente. LIMPE A LISTA DA CIDADE Var CtecheElement = Document.getElementById ("City"); var opts = CityElement.getElementsByTagName ("Option"); para (var i = 1; i <opts.Length; i ++) {CityElement.RemoveChild (Opts [i]); i-;} // b. Obtenha o valor selecionado pelo usuário (Província) var ProvinceValue = this.value; if (ProvinceValue == "Selecione") {return false;} // c. Obtenha a cidade var xhr = getxhr (); xhr.open ("post", "city.php"); xhr.setRequestHeader ("content-type", "Application/x-www-corm-urlencoded"); xhr.send ("Provrince ="+ProvinceValue); xhr.); && xhr.status == 200) {var data = xhr.ProSeText; var arr = data.split (","); for (var i = 0; i <arr.length; i ++) {// <pption> city </pption> var opt = document.createElement ("option"); var text = document.createTextNode (arr [i]); opt.appendChild (texto); CityElement.AppendChild (Opt);}}}} função getXhr () {var xhr = null; if (window.xmlhttprequest) {xhr = new}}} »RetinSoft (MicroSoft ();} else {xhr = new ActivexObject (" MicroSoft (MicroSoft ();}; xhr;} </cript> Província.php Código é o seguinte: <?O código da cidade.php é o seguinte:
<?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, Cidade de Jinzhou, cidade de Tieling, cidade de Dandong '; quebra; caso' Província de Shandong ': Echo' Jinan City, Cidade de Qingdao, cidade de Weihai, cidade de Rizhao, cidade de Dezhou '; Break;}O diagrama de interface final é o seguinte:
O exposto acima é um pequeno caso de ligação provincial e municipal no segundo nível introduzido pelo editor. Espero que seja útil para você. Se você quiser saber mais, preste atenção ao wulin.com!