php+ajax动态生成下拉菜单

时间：2009-07-23 来源：hkebao

效果：

<iframe border="0" marginwidth="0" src="http://www.phpfans.net/bbs/mytest/index1.html" 0?="" scrolling="no" width="168" frameborder="no" height="100"></iframe>

CODE:

[复制到剪切板]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
//var ab = new Array();
var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

function startRequest() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    document.getElementById('select2').options.length = 0;
    var url = document.form1.select1.value;
    var qurl = "getCities.php?countryCode="+url+"&time="+new Date().getTime();
    xmlHttp.open("GET", qurl, true);
    xmlHttp.send(null);
    //setTimeout("startRequest()",2000);
}

function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
        var obj = document.getElementById('select2');
            eval(xmlHttp.responseText);

        }
    }
}

</script>
</head>

<body>
<form name="form1" method="post" action="">
  <p>
    <select name="select1" id="select1" onChange="startRequest()">
      <option value="0">选择</option>
      <option value="no">1</option>
      <option value="dk">2</option>
      <option value="us">3</option>
    </select>
</p>
  <p>
    <select name="select2" id="select2">
    </select>
</p>
</form>
</body>
</html>

(非常全面的一个php技术网站,php爱好者站 http://www.phpfans.net 有相当丰富的文章和源代码.)
getCities.php

CODE:

[复制到剪切板] <?php

if(isset($_GET['countryCode'])){

  switch($_GET['countryCode']){

    case "no":
      echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
      echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
      echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
      echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";

      break;
    case "dk":

      echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
      echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
      echo "obj.options[obj.options.length] = new Option('Odense','13');\n";

      break;
    case "us":

      echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
      echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
      echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
      echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
      echo "obj.options[obj.options.length] = new Option('New York','25');\n";
      echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
      echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";

      break;
  }
}
?>