0

私の目標は、米国の州でいっぱいのドロップダウンメニューを作成することです。州を選択すると、2番目のドロップダウンメニューにその州の都市が表示されます。データベースにすべての都市を保存することを検討していないため、すべての州の都市の配列を保存する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パラメーターは、citys配列内の位置を追跡するために、「i+statename」の形式になっています。

    <?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つの都市すべてを入力する際に​​機能します。ただし、現在、citys配列からnull値が正しく機能していないのを待って、while（）ループを終了しようとしています。そのため、JSコードで$ florida []配列のサイズを特定して、 while（）ループを終了し、ドロップダウンメニューへの入力を停止できます。

ヘルプやヒントは大歓迎です！

4

2 に答える 2

0

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);
    });
});
于 2012-08-17T21:35:18.907 に答える
0

うわあ。あなたは働きすぎです。まず、jQuery の AJAX 関数をお勧めします。

また、このようなものについて JSON を調べても害はありません。JSON は PHP 配列で非常にうまく機能します :)

基本的には、都市の配列を返す PHP スクリプトに ajax リクエストを送信する州を選択してもらいます。

したがって、最初に状態を選択するときに AJAX リクエストを送信するだけです。次に、php に JSON 配列を送り返します。次に、JSON 配列をループして、新しい選択ボックスに追加します。JSON は非常に簡単なので、心配はいりません。

于 2012-08-17T21:36:09.130 に答える