php+mysql+javascript实现二级联动下拉框

本例实现的内容是：一级下拉框是选择公司名的首字母，二级内容是首字母对应的所有公司。

首先新建一个数据库名叫useradmin，创建两个数据表名叫com_charter 和company。

com_charter存放的是首字母，有两个字段Charter_id 和charter，这里我是手动输入的数据，分别是1到26和A到Z，为了防止有数字开头的公司名，加了一个数据27 和‘123’

company存放的是公司名，有四个字段id、company、comFirstCharter、Charter_id，company是公司名，comFirstCharter是首字母，Charter_id是首字母的序号

准备工作做好，和上一篇博客一样创建mysqli的对象$mysqli ，这里不多赘述了。

include("db.php");
//******************提取一级首字母信息 ******************
$sql = "SELECT*FROM com_charter ORDER BY Charter_id";

$result1 = $mysqli->query($sql) ;                             
$com_charter = array();
while( $row1 = mysqli_fetch_array($result1) )
{
  $com_charter[] = $row1;
}
mysqli_free_result($result1);
//**************获取二级公司名信息 **************  
$sql2 = "SELECT*FROM company ORDER BY id";

$result2 = $mysqli->query($sql2);                                         
if(!$result2)
{
  die('Could not query t_city list');
}
$company = array();
while( $row2 = mysqli_fetch_array($result2) )
{
  $company[] = $row2;
}
mysqli_free_result($result2);
?>

因为后续操作是要给对应的公司上传文件，所以这里需要一个表单，上传部分的代码今天先不写了。

<form name="file_add_form" action="judge_add_files.php" method="post" enctype="multipart/form-data" >
        //action将表单数据发送给judge_add_files.php 进行判断处理                      
<input type="file" name="file" style="margin-left:auto;margin-right:auto" required/>

    <select name="com_charter" 
    onChange="changeCharter(document.file_add_form.com_charter.options[document.file_add_form.com_charter.selectedIndex].value)" 
    <!--js changeCharter方法 参数为Charter_id首字母id  -->
    size="1" style="color:black; margin-top:20px">
    <option selected>==请选择首字母 ==</option>
    <?php
    $num = count($com_charter);  //获取一级首字母的个数
    <!--下拉框显示首字母 （for循环） -->
    for($i=0;$i<$num;$i++)
    {
    ?>
    <option value="<?php echo $com_charter[$i]['Charter_id'];?>"><?php echo $com_charter[$i]['charter'];?></option>
    <?php
    }
    ?>
    </select>
    <select name="company" style="color:black" required>
    <option selected value="<?php echo $company['company'];?>">==选择公司 ==</option>
    </select>   
    <input type="submit"  value="上传文件"/>        
</form>

下拉框已经搭好了，但是还没达到效果，company现在还不能随一级下拉框进行联动，下面是联动切换的代码

<script language = "JavaScript">
 var companyCount; // 存储公司记录条数
 form_company = new Array();
 <?php
   $num2 = count($company); // $num2 获取专业表中记录的个数
 ?>
   companyCount = <?php echo $num2;?>;
 <?php
   for($j=0;$j<$num2;$j++) // 从 0开始取出上面 company[]中存储的公司数据填充数组
 {
 ?>
   form_company[<?php echo $j;?>] = new Array("<?php echo $company[$j]['id'];?>",
   "<?php echo $company[$j]['Charter_id'];?>","<?php echo $company[$j]['company'];?>");
 <?php
 }
 ?>

 function changeCharter(Charter_id)
 {
   document.file_add_form.company.length = 0;
   var id=id;
   var j;
   document.file_add_form.company.options[0] = new Option('==选择公司==',''); // label的 value为空 ' '
   for (j=0;j < companyCount; j++) // 从 0开始判断
   {
    if (form_company[j][1] == Charter_id)
    {
      document.stu_add_form.company.options[document.stu_add_form.company.length] = new Option(form_company[j][2], form_company[j][0]);
    }
   }
 }
</script>