Question

我有这个问题。使用HTML和PHP。

我可以知道怎么做。我有2下拉，例如A和B.下拉B取决于下拉A.例如，A有这些选项将从dbase调用（没有概率，这个，tq）（杰克，卡罗尔）和B wil有选项取决于A：如果选择Jack（T1，T2，T3），如果选择carol（T1，T2，T3，T4，T5）。

以下是示例界面。

alt text http://i41.tinypic.com/2vk1fgk.png

有人可以帮我这个吗？

谢谢。

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>

在上面的状态下拉列表中，使用countryId和stateId参数在onChage事件中调用getCity（）函数，现在让我们看一下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方法提供的参数country和state来填充city下拉列表。现在让我们看一下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的城市，国家和州的三重下拉列表。

Answer 2

Ajax现在很“酷”，所以每个人都会说使用ajax。我要说你不需要ajax。另一种方法是禁用第二种形式。当提交/更改第一个选择时，页面重新加载向查询字符串添加内容，例如？a = jack并且第二个选项填充了正确的值。

现在任何链接到？a = jack的页面都会自动填充第二个选择，当使用ajax时你必须编写更多的javascript代码。

我不是说不要使用ajax，我只是给出一个不同的，最可能更容易的选择。

只有在真正帮助用户体验时才使用ajax。

Answer 3

你需要绑定到下拉A的onClick的Ajax，它被设置为填充下拉B的内部HTML

Answer 4

如果您绝对不想使用jQuery或javascript，可以采取一种方法：

<form action="?step=2" method="post">
<select name="name">
    <option if($_POST['name'] == 'Jack'){echo ' selected="selected" ';}>Jack</option>
    <optionif($_POST['name'] == 'Carol'){echo ' selected="selected" ';}>Carol</option>
</select>

<?php if($_GET['step'] == 2){?>
<select name="b">
<option>1</option>
<option>2</option>
<option>3</option>
<?php if($_POST['name'] == 'Carol'){?>
<option>4</option>
<option>5</option>
<?php } ?>
</select>
</form>
<?php } ?>

<input type="submit" name="next" value="Next" />

您必须将表单/页面打包成步骤。当重新加载页面时，需要重新填充整个表单。

希望这对您有所帮助

Answer 5

我认为本教程解释了您要实现的目标：Dependable Dropdown Menus with jQuery and PHP

PHP下拉，每个都是可靠的

5 个答案: