option--三级联动

最新推荐文章于 2023-04-10 16:04:51 发布

原创最新推荐文章于 2023-04-10 16:04:51 发布 · 593 阅读

CC 4.0 BY-SA版权

1.数据库

CREATE TABLE `student` (
`id` int(50) NOT NULL auto_increment,
`name` varchar(50) collate utf8_unicode_ci NOT NULL,
`dept` varchar(50) collate utf8_unicode_ci NOT NULL,
`class` varchar(50) collate utf8_unicode_ci NOT NULL,
`sex` varchar(50) collate utf8_unicode_ci NOT NULL,
`dept_id` int(50) NOT NULL,
`class_id` int(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=5 ;

INSERT INTO `student` (`id`, `name`, `dept`, `class`, `sex`, `dept_id`, `class_id`) VALUES
(1, '计算机名字', '计算机工程系', '计061', '男', 1, 11),
(2, '教计名字', '计算机工程系', '教技061', '男', 1, 14),
(3, '管理名字', '管理系', '管理061', '女', 2, 21),
(4, '机械名字', '机械工程系', '自动化061', '男', 3, 31);

2.代码部分

<?php
header("Content-type: text/html; charset=utf-8");?>
<?php
    $link = mysql_connect('localhost','root','12345678')or die('数据库服务器连接错误'.mysql_error());
    mysql_select_db('diy',$link) or die('数据库访问错误'.mysql_error());
    mysql_query('set names utf8');
?>
<html>
<head>
    <title>下拉框连动</title>
</head>
<body>
<script language = "JavaScript">
    //二级菜单
    var subcat = new Array();
    <?php
        $i = 0;
        $sql = "select * from student";
        $query = mysql_query($sql,$link);
        while($arr = mysql_fetch_array($query)){
            echo "subcat[".$i++."] = new Array('".$arr["dept_id"]."','".$arr["class"]."','".$arr["class_id"]."');\n";
        }
    ?>
    //三级菜单
    var subcat2 = new Array();
    <?php
    $i=0;
    $sql="select * from student";
    $query=mysql_query($sql,$link);
    while($arr=mysql_fetch_array($query))
    {
        echo "subcat2[".$i++."] = new Array('".$arr["class_id"]."','".$arr["class"]."','".$arr["name"]."');\n";
    }
    ?>
    function changeselect1(locationid){
        document.form1.s2.length = 0;
        document.form1.s2.options[0] = new Option('22请选择','');
        for(i = 0;i<subcat.length;i++){
            if(subcat[i][0] == locationid){
                document.form1.s2.options[document.form1.s2.length] = new Option(subcat[i][1], subcat[i][2]);
            }
        }
    }
    function changeselect2(locationid)
    {
        document.form1.s3.length = 0;
        document.form1.s3.options[0] = new Option('33请选择33','');
        for (i=0; i<subcat2.length; i++)
        {
            if (subcat2[i][0] == locationid)
            {
                document.form1.s3.options[document.form1.s3.length] = new Option(subcat2[i][2], subcat2[i][0]);
            }
        }
    }
</script>
    <form name="form1">
        <select name="s1" onChange="changeselect1(this.value)" id="s1">
            <option>--请选择--</option>
            <option  value=1>计算机工程系</option>
            <option  value=2>管理系</option>
            <option  value=3>机械工程系</option>
        </select>
        <select name="s2" onChange="changeselect2(this.value)" id="s2">
            <option>--请选择--</option>
        </select>
        <select name="s3" id="s3">
            <option>--请选择--</option>
        </select>
        <input type="button" id="s4" value="提交">
    </form>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script>
    $('#s4').click(function () {
        alert($('#s1 option:selected').val());
        alert($('#s2 option:selected').val());
        alert($('#s3 option:selected').val());

    });

</script>
</body>
</html>