0

我必须有 2 个下拉菜单，如下所示：

下拉 http://img401.imageshack.us/img401/3786/90550627.jpg

Item 菜单有两个值，即“Server”和“Switch”。同时，模型菜单中的值取决于项目菜单中的值。模型菜单中的值是从数据库中调用的。What I want to do is when "Server" is selected, it will call data from server table into the Model menu and when "Switch" is selected, it will call data from switch table. 我怎样才能做到这一点？

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>

这是我自己的脚本，我假设您已经创建了国家和地区表。但是您需要根据您的数据库结构调整查询和上述代码。

参考我的回答：Cascade Dropdown List using jQuery/PHP

希望这可以帮助。

于 2012-04-12T05:15:35.073 回答
0

您应该有一个 ajax 调用来更新选择框。

项目选择框上的 JavaScript 函数调用 ajax。

供您参考：http ://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

于 2012-04-12T05:09:49.440 回答