本例实现的内容是:一级下拉框是选择公司名的首字母,二级内容是首字母对应的所有公司。
首先新建一个数据库名叫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>