0

次のような 2 つのドロップダウン メニューが必要です。

ドロップダウン http://img401.imageshack.us/img401/3786/90550627.jpg

Item メニューには、「Server」と「Switch」の 2 つの値があります。一方、Model メニューの値は Item メニューの値に依存します。Model メニューの値はデータベースから呼び出されます。私がやりたいことは、「サーバー」が選択されたときにサーバーテーブルからモデルメニューにデータを呼び出し、「スイッチ」が選択されたときにスイッチテーブルからデータを呼び出すことです。どうやってやるの？

4

2 に答える 2

2

簡単な例を見てみましょう。私はあなたが望むのと同じ目的でこれを使用しており、完全に正常に動作します。

これを使用して、国のドロップダウンでの選択に従って都市のドロップダウンを設定しています。ここでは、国をアイテムとして、都市をモデルとして使用できます

これは国のドロップダウンです：

<?php
        $countrylist=mysql_query("SELECT * FROM country ORDER BY name ASC");
        echo "<select name='country' id='country' onchange=\"reload(this.form)\" title='Country e:g; United Kingdom,Pakistan'><option value='0'>Select Country</option>";
        while($clist=mysql_fetch_array($countrylist))
        {
          echo "<option value='$clist[Name]'>$clist[Name]</option>"."<br/>";
        }
        echo "</select>";
 ?>

これは地域のドロップダウンです。

<select name="region" id="region" ></select>

次に、crlist.js という名前の別のファイルを作成し、次のような上記のコードを含むページに含めます。

<script  type="text/javascript" src="crlist.js"> </script>

crlist.js のコード:

var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
request = false;
}
}
@end @*/
function fillSelect(country,path) {
var url = path+"crlist.php?country=" + country;
request.open("GET", url, true);
request.onreadystatechange = go;
request.send(null);
}

function go() {
if (request.readyState == 4) {
//if (request.status == 200) {

var response = request.responseText;

var list=document.getElementById("region");
            for (i = list.length - 1; i>=0; i--) {
                list.remove(i);
            }
var records=response.split('|');
for (i=1; i<records.length; i++) {
    //alert("rcord="+records[i]);
    var record=records[i].split('*');
    var region=record[0];
    //alert("region="+region);
    var regionid=record[1];
    //alert("regionid="+regionid);
    var x=document.createElement('option');
    //var y=document.createTextNode(region);
    x.text=region;
    //x.value=region;
    //alert(x.text);
   //x.appendChild(y);
   //list.appendChild(x);
   list.options.add(x);
   }
  //}
 }
}

function initCs(path) {

if (!request && typeof XMLHttpRequest != 'undefined') {
request = new XMLHttpRequest();
}
var country=document.getElementById('country');
    country.onchange=function() {

        if(this.value!="Select") {

            var list=document.getElementById("region");
            for (i = list.length - 1; i>=0; i--) {
                list.remove(i);
            }
        //while (list.childNodes[0]) {
        //list.removeChild(list.childNodes[0]);
        //}
        }
        fillSelect(this.value,path);
        //alert(this.value);

    }
//fillSelect(country.value);
}

次に、crlist.php という名前の別のファイルを作成します。

crlist.php のコード:

<?php
require_once 'yourconfigfile.php';

$cname = $_GET['country'];

$query="select ID,Name from city where CountryCode=(select code from country where name='$cname') Order By Name ASC";
$res = mysql_query($query) or die(mysql_error());
while($region = mysql_fetch_array($res)){
    echo "<option value='".$region['Name']."'>".$region['Name']."</option>";
}       
?>

ドロップダウンのあるページに次のスクリプトを追加します。

<script  type="text/javascript" src="crlist.js"> </script>
<script>
$(document).ready(function() {

    initCs("");

});
</script>

これは私自身のスクリプトであり、国と地域のテーブルが作成されていると想定しています。ただし、データベース構造に応じて、クエリと上記のコードを微調整する必要があります。

私の答えへの参照: jQuery/PHP を使用したカスケード ドロップダウン リスト

お役に立てれば。

于 2012-04-12T05:15:35.073 に答える
0

選択ボックスを更新するには、ajax 呼び出しが必要です。

ajaxを呼び出すアイテム選択ボックスのJavaScript関数。

ご参考までに：http: //remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

于 2012-04-12T05:09:49.440 に答える