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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.