每个都是可靠的 PHP 下拉菜单

Question

我有这个问题。使用 html 和 php。

我可以知道怎么做吗？我有 2 个下拉菜单，例如 A 和 B。下拉菜单 B 取决于下拉菜单 A。例如，A 有这些选项，这些选项将从 dbase 调用(没有这个问题，tq)(Jack，Carol)和 B将有选项取决于 A:如果选择 Jack(T1, T2, T3)，如果选择 carol(T1,T2,T3,T4,T5)。

这是示例界面。

有人可以帮我解决这个问题吗？

谢谢。

Answer 1

在这种情况下，您需要使用 Ajax。在不刷新页面的情况下选择任何 A 列都会为您提供相应的 B 列值。例如

<form method="post" name="form1">
 <table border="0" cellpadding="0" cellspacing="0" width="60%"><tbody>
  <tr>
   <td width="150">Country</td>
   <td width="150"><select style="background-color: #ffffa0" name="country" onchange="getState(this.value)"><option>Select Country</option><option value="1">USA</option><option value="2">Canada</option>       </select></td>
  </tr>
 <tr>
  <td>State</td>
  <td>
  <p id="statediv">
  <select style="background-color: #ffffa0" name="state"><option>Select Country First</option>       </select></td>
</tr>
<tr>
  <td>City</td>
  <td>
  <p id="citydiv">
  <select style="background-color: #ffffa0" name="city"><option>Select State First</option>       </select></td>
</tr>
</tbody></table>
</form>

正如你在上面看到的，在国家/地区下拉的 onChage 事件中调用了 javascript 的 getState() 函数，它更改了国家/地区下拉列表的选项值，让我们看一下 getState() 函数的代码。

function getState(countryId)
{
   var strURL="findState.php?country="+countryId;
   var req = getXMLHTTP();
   if (req)
   {
     req.onreadystatechange = function()
     {
      if (req.readyState == 4)
      {
     // only if "OK"
     if (req.status == 200)
         {
        document.getElementById('statediv').innerHTML=req.responseText;
     } else {
       alert("There was a problem while using XMLHTTP:\n" + req.statusText);
     }
       }
      }
   req.open("GET", strURL, true);
   req.send(null);
   }
}

下面给出了 PHP 文件 findState.php 的代码，它填充了从 Ajax 获取的状态下拉列表中的选项

<? $country=intval($_GET['country']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$query="SELECT id,statename FROM state WHERE countryid='$country'";
$result=mysql_query($query);

?>
<select name="state" onchange="getCity(<?=$country?>,this.value)">
 <option>Select State</option>
  <? while($row=mysql_fetch_array($result)) { ?>
    <option value=<?=$row['id']?>><?=$row['statename']?></option>
  <? } ?>
</select>

在上面的state dropdown中，getCity()函数是在onChage事件中调用的，带有countryId和stateId参数，现在我们来看getCity()函数的代码

function getCity(countryId,stateId)
{
  var strURL="findCity.php?country="+countryId+"&state="+stateId;
  var req = getXMLHTTP();
  if (req)
  {
    req.onreadystatechange = function()
    {
      if (req.readyState == 4) // only if "OK"
      {
        if (req.status == 200)
        {
          document.getElementById('citydiv').innerHTML=req.responseText;
        } else {
          alert("There was a problem while using XMLHTTP:\n" + req.statusText);
        }
      }
    }
    req.open("GET", strURL, true);
    req.send(null);
  }
}

在上面的 ajax 函数中，调用了 findcity.php，此 PHP 文件根据 get 方法提供的参数国家和州填充城市下拉列表。下面我们看一下findcity.php的代码，

<?php $countryId=intval($_GET['country']);
$stateId=intval($_GET['state']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$query="SELECT id,city FROM city WHERE countryid='$countryId' AND stateid='$stateId'";
$result=mysql_query($query);

?>
<select name="city">
 <option>Select City</option>
  <?php while($row=mysql_fetch_array($result)) { ?>
 <option value><?=$row['city']?></option>
<?php } ?>
</select>

就是这样，将填充使用 Ajax 和 PHP 的城市、国家和州的三重下拉列表。