Simple drop-down options for Ajax implementation [recommended]: drop-down options for ajax implementation

Simple drop-down options for Ajax implementation [recommended]: drop-down options for ajax implementation

Basically all are fixed steps! Mainly in JAVASCRIPT and PHP

1. There are only two SELECT tags in the HTML code:

<Select id = "province"> <option> select </option> </select> <select id = "city"> <option> select </option>/ select>

2. The steps for creating options and executing AJAX asynchronous requests in Javascript are as follows:

<Script> var xhr = getXhr (); // the first time an Ajax asynchronous request is executed-the province window. onload = function () {xhr. open ("get", "finaly. php? State = 1 "); xhr. send (null); xhr. onreadystatechange = function () {if (xhr. readyState = 4 & xhr. status = 200) {var data = xhr. responseText; // converts a string to an array var provinces = data. split (","); // traverse the array for (var I = 0; I <provinces. length; I ++) {// create the option element and add it to the var option = document. createElement ("option"); var text = document. createTextNode (provinces [I]); option. appendChild (text); var province = document. GetElementById ("province"); province. appendChild (option) ;}}// the second Ajax asynchronous request-city var provinceEle = document. getElementById ("province"); provinceEle. onchange = function () {var city = document. getElementById ("city"); var opts = city. getElementsByTagName ("option"); for (var z = opts. length-1; z> 0; z --) {city. removeChild (opts [z]);} if (province. value! = "Select") {xhr. open ("post", "finaly. php "); xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); xhr. send ("province =" + province. value); xhr. onreadystatechange = function () {if (xhr. readyState = 4 & xhr. status = 200) {var data = xhr. responseText; var cities = data. split (","); for (var I = 0; I <cities. length; I ++) {var option = document. createElement ("option"); var text = document. createTextNode (cities [I]); option. appendChild (text); city. appendChild (option) ;}}}} function getXhr () {var xhr = null; if (window. XMLHttpRequest) {xhr = new XMLHttpRequest ();} else {xhr = new ActiveXObject ("Microsoft. XMLHttp ") ;}return xhr ;}</script>

3. the PHP code is as follows: the file name is finaly. php and the url of the xhr. open (method, url) method in JS!

<? Php // receives the REQUEST data sent by the client-state $ state =_ _ REQUEST ['state']; // determines the value of $ state if ($ state = 1) {// obtain the province echo 'shandong province, Liaoning province, Jilin province ';} else {// obtain the city $ province =$ _ POST ['province']; switch ($ province) {case 'shandong province ': echo 'qingdao city, Jinan City, Weihai City, Rizhao City, Dezhou City'; break; case 'liaoning province ': echo 'shenyang city, Dalian city, Tieling City, Dandong City, Jinzhou City '; break; case 'Jilin province ': echo 'changchun city, Songyuan City, Jilin City, Tonghua City, Siping City'; break ;}}?>

The key is how to implement AJAX Asynchronous interaction: Refer to JS Code. A fixed step.

The above Ajax implementation simple drop-down option effect [recommended] is all the content shared by xiaobian. I hope to give you a reference and support for the help house.