使用XMLHTTPREQUEST对象填充下拉菜单 [英] Populating dropdown menus using XMLHTTPREQUEST object

问题描述

我的目标是让美国的下拉菜单完整，选择国家后，第二个下拉菜单将填入该州的城市。由于我不想在我的数据库中存储所有的城市，所以我有一个名为list-of-cities.php的PHP文件，它将存储所有州的一系列城市。

My goal is to have a drop down menu full of US States and upon selecting a State, a second dropdown menu will populate with Cities that are in that State. Since I am not looking to store all of the Cities in my database, I have a PHP file called list-of-cities.php that will store an array of cities from all of the States.

以下代码是JS和HTML，它使XMLHTTPREQUEST对象从list-of-cities.php以及下拉表单中请求信息。函数AddToOptionsList（）将从XMLHTTPREQUEST对象的responseText（这是city-list中的数组中的城市）接收到的值添加到cities下拉菜单中。

The following code is the JS and HTML which makes the XMLHTTPREQUEST object to request information from list-of-cities.php as well as the dropdown forms. The function AddToOptionsList() adds the value received from the XMLHTTPREQUEST object's responseText (which is a city from the array in list-of-cities.php) to the "cities" dropdown menu.

    function PopulateCities() {

                var statesList = document.frmMain.states;

                var stateValue = statesList[statesList.selectedIndex].value;

                    var i = 0;
                    do {
                    //create new XMLHTTPRequest object
                    if (window.XMLHttpRequest)
                      {// code for IE7+, Firefox, Chrome, Opera, Safari
                      xmlhttp=new XMLHttpRequest();
                      }
                    else
                      {// code for IE6, IE5
                      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }

                      xmlhttp.onreadystatechange=function() {
                          if (xmlhttp.readyState==4 )
                            {
                            var responseText = xmlhttp.responseText;
                            if( responseText == null){
                                //the request sent a null value from the cities array therefore we reached the end of it
                                break;
                            } else{ 
                               //Add the value received from the response to the "cities" option list
                            AddToOptionList(document.frmMain.cities, i, responseText);
                            }
                            }
                      }
                    xmlhttp.open("GET","http://localhost//wp-content/themes/list-of-cities.php?q="i+stateValue,false);
                    xmlhttp.send();
                    i++;
                    } 
                    while(true);
                }



                function AddToOptionList(OptionList, OptionValue, OptionText) {
                // Add option to the bottom of the list
                OptionList[OptionList.length] = new Option(OptionText, OptionValue);
                }



                <form name="frmMain">
                <div id="choose_state">
                    Select a state from the drop down menu:<select name="states" onChange="PopulateCities();">
                        <option value="choose_state" selected="selected">Choose a state</option>
                        <option value="florida">Florida</option>
                        <option value="newyork">New York</option>
                        <option value="california">Callifornia</option>
                        <option value="northcarolina">North Carolina</option>
                    </select>
                </div><!--choose_state -->

                <select name="cities" >
                <option> Choose a city</option>
                </select>

                </form>

以下是目前只有城市数组的city.php代码佛罗里达州进行测试。从XMLHTTPREQUEST对象传递的$ q参数的格式为i + state name，以便跟踪在城市阵列中的位置。

The following is the list-of-cities.php code which currently only has an array for cities in Florida for testing purposes. The $q parameter that is passed from the XMLHTTPREQUEST object is of the form "i + state name" in order to keep track of the position in the cities array.

    <?php
    $florida[]="Gainesville";
    $florida[]="Miami";
    $florida[]="Tampa";
    $florida[]="Orlando";
    $florida[]="Jacksonville";
    $florida[]="Melbourne";
    $florida[]="Tallahassee";

    //$newyork[] = "Manhattan";
    //$newyork[] = "Brooklynn";
    //$newyork[] = "Queens";

    //get the q parameter from URL (i + State name)
    $q=$_GET["q"];

    $i = substr($q,0,1); //first char of $q contains the position in the city array
    $state = substr($q, 1, strlen($q)-1);   //gives the state name from $q
    if( $state == "florida" ) {
       echo $florida[$i];
    }

所有这些代码一起工作在填充下拉菜单中的所有$ florida []数组中的7个城市。但是，目前我正在尝试通过等待城市数组中的null值来结束while（）循环，这个值不正确，因此我需要帮助确定JS代码中$ florida []数组的大小，以便我可以结束while（）循环并停止填充下拉菜单。

All of this code together currently works in populating the dropdown menu with all of the 7 cities from the $florida[] array. However, I am currently trying to end the while() loop by waiting for a null value from the cities array which is not working correctly therefore I need help with identifying the size of the $florida[] array in the JS code so that I can end the while() loop and stop populating the dropdown menu.

任何帮助或提示非常感谢！

Any help or tips are much appreciated!

推荐答案

'你可以使用jSON和jQuery吗？

Why don't u use jSON and jQuery each?

http://api.jquery.com/jQuery.getJSON/

http://api.jquery.com/jQuery.each/

PHP

<?php
$someArray = array();

$someArray[] = 'value';
$someArray[] = 'value';
$someArray[] = 'value';
$someArray[] = 'value';
$someArray[] = 'value';

echo json_encode($someArray);
?>

jQuery

$.getJSON('http://www.example.com', { state: 'californie' }, function(data) {
    $.each(data, function(index, value){

        alert(index + ' ' + value);
    });
});

这篇关于使用XMLHTTPREQUEST对象填充下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！