Question

我有以下MySql表：

id | type      | mark      | model | series  | year
1    worldwide  NULL         NULL    NULL      NULL
2    1          Acura        NULL    NULL      NULL
3    1          2            NSX     NULL      NULL
4    1          2            3       TunedUp   2000-2003
5    1          2            3       & nbsp    2004-2005

我想创建一个相互选择的四个阶段的选择。例如，选择Sports，第二个字段选择Acura，第三个NSX和第四个TunedUP (2000 - 2003)或& nbsp; (2004 - 2005)。

我在JavaScript ToolBox Dynamic Option List找到了以下解决方案，但它显示了很多NULL值。我正在寻找一个更简单的解决方案。我试过谷歌搜索，但我甚至无法正确描述我的问题。

Answer 1

/* Create table country */
CREATE TABLE `country` (
  `id` tinyint(4) NOT NULL auto_increment,
  `country` varchar(20) NOT NULL default '',
  PRIMARY KEY  (`id`)
)

/*create table state*/
CREATE TABLE `state` (
  `id` tinyint(4) NOT NULL auto_increment,
  `countryid` tinyint(4) NOT NULL,
  `statename` varchar(40) NOT NULL,
  PRIMARY KEY  (`id`)
)

/* Create table city */
CREATE TABLE `city` (
  `id` tinyint(4) NOT NULL auto_increment,
  `city` varchar(50) default NULL,
  `stateid` tinyint(4) default NULL,
  `countryid` tinyint(4) NOT NULL,   PRIMARY KEY  (`id`)
)

现在要在工作中测试演示，我们必须在每个表中添加一些记录。因此，请运行以下查询以添加记录。

/* Inserting records into country table */
INSERT INTO `country` VALUES (1, 'USA');
INSERT INTO `country` VALUES (2, 'Canada');

/* Inserting records into state table */
INSERT INTO `state` VALUES (1, 1, 'New York');
INSERT INTO `state` VALUES (2, 1, 'Los Angeles');
INSERT INTO `state` VALUES (3, 2, 'British Columbia');
INSERT INTO `state` VALUES (4, 2, 'Torentu');

/* Inserting records into city table */
INSERT INTO `city` VALUES (1, 'Los Angales', 2, 1);
INSERT INTO `city` VALUES (2, 'New York', 1, 1);
INSERT INTO `city` VALUES (3, 'Toranto', 4, 2);
INSERT INTO `city` VALUES (4, 'Vancovour', 3, 2);

现在制作一个文件index.php并粘贴以下代码。

<form method="post" action="" name="form1"> 
<center>
<table width="45%"  cellspacing="0" cellpadding="0">
  <tr>
      <td width="75">Country</td>
      <td width="50">:</td>
      <td  width="150">
      <select name="country" onChange="getState(this.value)">
 <option value="">Select Country</option>
 <?php while ($row=mysql_fetch_array($result)) { ?>
 <option value=<?php echo $row['id']?>><?php echo $row['country']?></option>
 <?php } ?>
     </select>
   </td>
</tr>
<tr style="">
    <td>State</td>
    <td width="50">:</td>
    <td >
 <div id="statediv">
        <select name="state" >
        <option>Select State</option>
        </select>
 </div>
    </td>
</tr>
<tr>
    <td>City</td>
    <td width="50">:</td>
    <td >
 <div id="citydiv">
          <select name="city">
          <option>Select City</option>

           </select>

         </div>

    </td>

  </tr>
  </table>
</center>
</form>

在国家/地区的onChage事件中，我们调用了javascript的getState（）函数。哪个更改了State下拉选项值，让我们看一下getState（）函数的代码。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
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;
      document.getElementById('citydiv').innerHTML='<select name="city">'+
      '<option>Select City</option>'+'</select>';      
     } else {
      alert("Problem while using XMLHTTP:\n" + req.statusText);
     }
    }    
   }   
   req.open("GET", strURL, true);
   req.send(null);
  }  
 }
<script>

正如您在上面的代码中看到的，我们将countryid传递给findState.php文件，该文件填充了从Ajax获取的状态下拉列表中的选项，如下所示。

<?php $country=intval($_GET['country']); 
$con = mysql_connect('localhost', 'root', ''); 
if (!$con) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('test');
$query="SELECT id,statename FROM state WHERE countryid='$country'";
$result=mysql_query($query);

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

在上面的状态下拉列表中，getCity（）函数在其参数countryId和stateId的onChage事件上被调用，现在让我们看一下getCity（）函数的代码

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
     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("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']);
$con       = mysql_connect('localhost', 'root', ''); 

if (!$con) {
    die('Could not connect: ' . mysql_error());
}

mysql_select_db('test');
$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=<?php echo $row['id']?>><?php echo $row['city']?></option>
<?php } ?>
</select>

多选选项onChange with php

1 个答案: