从 <select> 字段中选择与前一个 <select> 字段中的值相对应的值答案

【问题标题】：select value from <select> field corresponding to value in previous <select> field从 <select> 字段中选择与前一个 <select> 字段中的值相对应的值
【发布时间】：2011-03-08 03:21:30
【问题描述】：

我有一个用 php 编写的表单。在这个表格中，有一个名为“州”的字段，该字段的选项是州的名称。还有另一个名为“地区”的字段，其选项是地区的名称。这两个字段的选项正在从数据库中获取。大约有 28 个州，每个州大约有 12 个区。现在想要的是当有人选择州时，该州对应的所有Districts都会自动出现在District字段中。

【问题讨论】：

标签： php forms

【解决方案1】：

您将需要 javascript 来很好地实现这一点。

这里有两个选项：

使用 ajax 加载地区选择/选项。即，当状态发生变化时，会触发 AJAX 请求并重新加载地区选择框。
加载所有地区，隐藏不合适的地区。

选项 2 的好处是您无需等待另一个请求完成，他们就可以选择地区。但是，它需要预先加载所有地区。所以 300ish 选项。

【讨论】：

感谢您简洁明了的解释。因为这是我第一次使用 ajax，所以我需要一些代码解释。

【解决方案2】：

创建一个将地区映射到州的 javascript 数组，例如：

var map = [];
map['state1'] = ['district1', 'district2', ... ];
map['state2'] = ['district13', 'district14', ... ];

然后第一个选择有一个 onChange 函数，该函数从第二个选择中清除选项并从数组中的预定义值重新填充它们。在 jQuery 中：

$('select[name=state]').change(function(){
    var state = $(this).val();
    var options = '';
    foreach (map[state] as district){
        options = options + '<option>'+district+'</option>';
    }
    $('select[name=district]').html(options);
});

【讨论】：

AJAX 解决方案可以工作，但存在许多性能问题。该解决方案最大限度地减少了数据库负载和网络流量。如果用户的连接速度较慢，这会好很多。由于您只是在学习，AJAX 解决方案对您来说可能是最简单的。和 Jacob 一样，我也为此推荐 jQuery。

【解决方案3】：

你可以使用 ajax 调用

在选择放onchange="changedist(this.value)"

并使用脚本功能

function changedist(str)
{
if (str=="")
  {
  document.getElementById("dist").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("dist").innerHTML=xmlhttp.responseText;
    }


  }

xmlhttp.open("GET","./dist.php?q="+str,true);
xmlhttp.send();
}

并在您的页面中调用此值 <div id="dist"> here will returns the distrctis of the file dist.php</div>

和 dist.php

$q = $_GET[q];
$sql= "select * from dist where state = $q";


$query ....


echo ' <select name=dist>';
while ($result = mysql_fetch_array($query))

{
echo " <option value=$result[key]>$result[dist]</option>";

}

所以这将在状态更改时返回到您的表单页面

【讨论】：

我知道我需要使用 ajax，但我只是不知道如何实现，因为这是我第一次使用它。非常感谢您的先机。
@Harbhag 您应该考虑使用诸如 JQuery 之类的 Javascript 框架，它们大大简化了事情并使它们更便携。
@jacob 感谢您的建议。我已经在考虑使用它了。