Question

我的目标是在美国各州都有一个下拉菜单，在选择州后，第二个下拉菜单将填入该州的城市。由于我不打算将所有城市存储在我的数据库中，因此我有一个名为list-of-cities.php的PHP文件，它将存储来自所有州的城市数组。

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

    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>

以下是list-of-cities.php代码，目前只有佛罗里达州城市的数组用于测试目的。从XMLHTTPREQUEST对象传递的$ q参数的形式为“i + state name”，以便跟踪cities数组中的位置。

    <?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个城市的下拉菜单。但是，我目前正试图通过等待来自cities数组的null值来结束while（）循环，因为我需要帮助识别JS代码中$ florida []数组的大小，以便我可以结束while（）循环并停止填充下拉菜单。

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

Answer 1

为什么不使用jSON和jQuery？

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);
    });
});

Answer 2

哇。你的工作太辛苦了。首先，我建议使用jQuery的AJAX函数。

另外，对于像这样的东西来看JSON也没什么坏处。 JSON适用于PHP数组：）

基本上，你要让他们选择一个状态，它会向一个将返回一系列城市的php脚本发送一个ajax请求。

因此，首先只需在选择状态时发送AJAX请求即可。接下来，让PHP发送一个JSON数组。然后遍历JSON数组，将其附加到新的选择框。 JSON非常简单，所以不用担心。

使用XMLHTTPREQUEST对象填充下拉菜单

2 个答案: