【问题标题】:how to get runtime control in html? [closed]如何在 html 中获得运行时控制? [关闭]
【发布时间】:2012-06-16 09:06:18
【问题描述】:

我正在创建一个项目。在此我想通过下拉列表获取地址,如果我从下拉列表中选择国家/地区,则会出现另一个下拉列表,其中包含对应国家/地区的状态。与状态等相同直到请求?

【问题讨论】:

标签: javascript html ajax


【解决方案1】:

您正在寻找“级联下拉菜单”。实际上,您的第一个下拉列表在选择时会进行 ajax 调用,成功后会填充第二个下拉列表,依此类推。

这是一个非常常见的功能(可能与 ajax 自动完成一起最常见),一两个 google 会为您找到一些非常可靠的示例。

我强烈建议使用 jQuery 来完成这项工作。

【讨论】:

    【解决方案2】:
      <select name="country" onchange="showstate(this.value);">
    
    //script code
     function showstate(ctr)
      {
    if (ctr==" ")
    {
        document.getElementById("txtHint").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            var x=xmlhttp.responseText;
            var arr = new Array();
            var v=new Array();
            arr=x.split(",");
            // Create an Option object        
            document.getElementById("DropDownList").innerHTML='<option value="select">Select university</option>';
            for (var i=0;i<arr.length-1;i=i+2)
            {
                v[i]=arr[i];
                v[i+1]=arr[i+1];
                document.getElementById("DropDownList").innerHTML+="<option value="+v[i]+">"+v[i+1]+"</option>";
            }
           }
          }
       xmlhttp.open("GET","getstate.php?q="+ctr,true);
       xmlhttp.send();
      }
    

    //getstate.php

      <?php
    
         $q=$_GET["q"];
         $sql="SELECT DISTINCT `state` FROM `tbname` WHERE `country` = '$q'";
         $result=mysql_query($sql);
         $str='';
         while($row = mysql_fetch_array($result))
       {
        $str.=$row['country'].",";
       }
         echo $str;
    ?>
    

    【讨论】:

    • 你怎么知道OP在使用php和mysql?
    • 如果他使用 php xmlhttp.open("GET","getstate.php?q="+ctr,true);如果他使用jsp xmlhttp.open("GET","getstate.jsp?q="+ctr,true);
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多