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>