Question

我有一个用PHP编写的表单。在这种形式中，有一个名为“State”的字段，该字段的Options是状态的名称。还有另一个名为“District”的字段，其Options是区的名称。正在从数据库中提取这两个字段的选项。大约有28个州，每个州大约有12个区。现在需要的是，当有人选择状态时，与该状态相对应的所有区域将自动出现在区域字段中。

Answer 1

你需要javascript来很好地实现它。

以下是两个选项：

使用ajax加载区选择/选项。即更改状态时，将触发AJAX请求并重新加载区域选择框。
加载所有区域，并隐藏不合适的区域。

选项2的好处是您无需等待其他请求完成才能选择区域。但是，它需要预先装载所有区域。所以有300种选择。

Answer 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);
});

Answer 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>";

}

所以这将返回状态更改

的表单页面

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

3 个答案: