0

これについて多くのスレッドを見ましたが、私が行っていることに関連するものがあるかどうかはわかりません。私はいくつかの「解決策」を試しましたが、まったく役に立ちませんでした。これが私のコードの一部です：

<td><select name="County" onChange="getCity('findcity.php?county='+this.value)">

...。

   <td><fieldset id="f2">
     <select name="Town">
     <option value="Any">Any Town</option>
     </select>
     </fieldset>
       </td></tr>

...。

</td></tr>
           <tr>
           <td><fieldset id="f4">
           <input type="submit" name="Search!">
           </fieldset>
           </form>
           </td>
           </tr>

Town Selectは、最初はプレースホルダーとしてのみ存在します。変更された最初のドロップダウンで、2番目のドロップダウンがgetCity（）関数を介して入力されます。選択した値をfindcity.phpに渡し、mysqlを使用してfindcity.phpを介して値を設定し、TOWNselectを複製に置き換えます。

MySQLで生成されたもの:(動作します）

<select name="Town">
<option value="Any">Any Town</option>
<? while($row=mysql_fetch_array($result)) { ?>
   <option value="<?=$row['dir_town']?>"><?=$row['dir_town']?></option>
<? } ?>
</select>

そして、これはすべての作業を行う関数です。

<script>
function getXMLHTTP() { //function to return the xml http object
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }



    function getCity(strURL) {      

        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('f2').innerHTML=req.responseText;   

                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }

    }


</script>

最終結果はGETでこれです：

results.php?County=Kent&Sector=Any&Search%21=Submit

何もせずに送信すると、次のように機能します。

results.php?County=Bedfordshire&Town=Any&Sector=Any&Search%21=Submit

入力ボックスに取って代わっていないので想像します。DIV内にあるために発生したと思われる問題を解消するために、フィールドセットを使用しました。

ため息、私はこれに簡単な解決策があることを知っています、私はただ何を思い出せません。

また、リクエストから「＆Search ..」の部分を削除する方法を教えてくれた場合のボーナスポイント：S検索ボタンがなぜそこに自分自身を入れているのかわかりません。フィールドセットの？よろしくお願いします。

編集：誰かが2番目のドロップダウンにデータを入力してこれを修正する別の方法を与えることができれば、私はかなり満足します。

$county=$_GET['county'];
//$county =mysql_real_escape_string($county);
include('includes/dbc.php');

$query="SELECT DISTINCT `dir_town` FROM `directories` WHERE `dir_county` = '$county' ORDER BY `dir_town` ASC";
$result=mysql_query($query);?>
<select name="Town">
<option value="Any">Any</option>
<? while($row=mysql_fetch_array($result)) { ?>
       <option value="<?=$row['dir_town']?>"><?=$row['dir_town']?></option>
    <? } ?>
    </select>

私のdbc.phpはすべての接続を行います。

4

1 に答える 1

1

まず、「検索」を削除します。クエリ文字列から、置き換えます

<input type="submit" name="Search!">

と

<input type="submit" value="Search!" />

「検索」は属性を持っているため、クエリ文字列に追加されていnameます。を削除するnameと、クエリ文字列から入力が削除されます。

アップデート：

AJAX呼び出しにjQueryを使用することを検討することをお勧めします。それはずっときれいです（あなたはその醜いgetHMLHTTP()機能を取り除くことができます）。jQueryソースを含めるだけ

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

onchangeこれで、jQuery呼び出しの使用を開始し、インライン属性を取り除くことができます。

<script language="javascript" type="text/javascript">
    $("select[name=County]").on('change', function() {
        $.get('findcity.php', 
            {
                county: $("this").val()
            }, function (data) {
                $("#city").replace(data);
            }
        );
    });

}
</script>

$.get()（$("#city").replace(data);）からのコールバック関数は、id「city」である要素をfindcity.phpから返される要素に置き換えます。これは別のドロップダウンであると想定されているため、元の形式でこれを実行します。

<select name="Town" id="city"></select>

次に、出力がfindcity.phpからのものである場合、それは入力されたドロップダウンリストに置き換えられます。

<select name="Town" id="city">
    <option value="Any">Any Town</option>
    <? while($row=mysql_fetch_array($result)) { ?>
       <option value="<?=$row['dir_town']?>"><?=$row['dir_town']?></option>
    <? } ?>
</select>

ここで、「Town」ドロップダウンと同様のことを行う必要がある場合は、「Town」のjQuery.on()コードを繰り返します（IDを指定したため、名前またはIDで参照できます）。

//$("#city") can be used instead of $("select[name=Town]") - both return the same element
$("select[name=Town]").on('change', function() { 
    // do something here
});
于 2012-08-07T14:09:40.770 に答える