The three-level linkage of provinces and cities is realized with ajax

The data structure of the table in the database dt_area:

html code part:

省：<select name="" id="sheng" onChange="selshi(this)">
    <option value="">请选择</option>
    </select>
市：<select name="" id="shi" onChange="selqu(this)">
    <option value="">请选择</option>
</select>
区：<select name="" id="qu">
    <option value="">请选择</option>
</select

js code part:

// Used to put the new array in the chulidata function 
    var attr = [];
     // After the page is loaded, call the function sendInfo, and pass the id of the drop-down box to the function 
    window.onload = function (){
        sendInfo('sheng');
    }
    // The function called after the page is loaded (code=0, the saved information is displayed to the page after the page is loaded), the type is the id of the passed select, and the code is the area_parent_id passed to the php page in the get method. 
    function sendInfo( type,code=0 ){
         // Create object 
        var xhr = new XMLHttpRequest();
         // Monitor ajax state 
        xhr.onreadystatechange = function (){
             if (xhr.readyState==4 ){
                 // Process data, call function chulidata , the passed two parameters xhr.responseText (database data queried from the php page, in the form: 110000, Beijing; 120000, Tianjin;) type select id 
                chulidata(xhr.responseText, type);
            }
        }
        // Create a new http request: access the php page by get, 
        xhr.open("get",'sanjiliandong.php?code='+ code);
         // send request 
        xhr.send( null );
    }
    // The function of processing data, data: xhr.responseText (database data queried from the php page) type: select id 
    function chulidata(data,type){
         // Process the data queried from the php page, remove the separator; Form a one-dimensional array in the form of: [ "110000,Beijing", "120000,Tianjin"] 
        var arr1 = data.split(';' ),
             // Define a variable: an option label 
            str = "<option value= ''>Please select</option>" ;
         // traverse the array 
        for ( var i=0;i<arr1.length;i++ ){
             // remove the commas in each element in the array to form an attr array For: [[ "110000", "Beijing" ] , [ "120000", "Tianjin" ]] 
            attr[i] = arr1[i].split(',' );
            // Put the elements in the attr array into the option tag of str
            str += "<option value='"+attr[i][0]+"'>"+attr[i][1]+"</option>";
        }
        // Put str to the corresponding page position to display 
        document.getElementById(type).innerHTML = str;
    }
    // When selecting the function to call in the time-saving, obj is this function passed when calling the 
    function selshi(obj){
         // Empty the content in the area when selecting the time-saving 
        var str = "<option value=''>Please select </option>" ;
        document.getElementById( 'qu').innerHTML = str;
         // Pass the id of the city's select tag and the value of the corresponding province tag when calling the function sendInfo 
        sendInfo('shi' ,obj.value);
    }
    // Select the function called by the city 
    function selqu(obj){
         // Pass the id of the select label of the district and the value of the corresponding city label when calling the function sendInfo 
        sendInfo('qu' ,obj.value);
    }

View Code

php code part:

<? php
 $db = new MySQLi('localhost','root','','dt_area' );
 ! mysqli_connect_error () or die ('link error' );
 $db ->query('set names utf8' ) ;
 // The code submitted by the get method, that is, the area_parent_id in the database table 
$code = $_GET ['code' ];
 // Database query, the condition is that the area_parent_id is equal to the code passed by the xhr.open request in the sendInfo function Value 
$sql = 'select id,area_name from dt_area where area_parent_id = '. $code ;
 $res = $db ->query( $sql );
$arr = $res->fetch_all();

$str = "" ;
 // The for loop turns the $arr array obtained by the query into 110000, Beijing; 120000, Tianjin in the form of 
foreach ( $arr  as  $key => $value ){
     foreach ( $value  as  $v ){
         $str .= $v ."," ;
    }
    // Remove 110000,Beijing,120000,Tianjin, the last comma 
    $str = substr ( $str ,0,-1 );
     // 110000,Beijing;120000,Tianjin; 
    $str .= ';' ;
}
// Remove 110000, Beijing; 120000, Tianjin; the semicolon at the end 
$str = substr ( $str ,0,-1 );
 // Finally output 110000, Beijing; 120000, Tianjin 
echo  $str ;

View Code