实现三级联动菜单

change：事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发

HTML代码

<select name="" id="selProvince">
    <option value="">----请选择----</option>
</select>
<select name="" id="selCity">
    <option value="">----请选择----</option>
</select>
<select name="" id="selCountry">
    <option value="">----请选择----</option>
</select>

jQuery编辑

<script>
    var iNum1;
    var iNum2;
    var aProvince = ["湖北","江苏","安徽"];
    var aCity =[["武汉","黄冈","荆门"],["南京","无锡","镇江"],["合肥","安庆","黄山"]];
    var aCountry =[[["武汉1","武汉2"],["黄冈1","黄冈2"],["荆门1","荆门2"]],[["南京1","南京2"],
        ["无锡1","无锡2"],["镇江1","镇江2"]],[["合肥1","合肥2"],["安庆1","安庆2"],["黄山1","黄山2"]]];

    $(function () {
        for(var i=0;i<aProvince.length;i++){
            //获取到第一个标签，将省按照下拉框模式依照下标加进去
            $("#selProvince").append("<option>"+aProvince[i]+"</option>");
        };
        $("#selProvince").change(function () {
            //获取到第二个标签，除却第一个下拉列表，其他的都清除
            $("#selCity").children().not(":eq(0)").remove();
            //获取到第三个标签，除却第一个下拉列表，其他的都清除
            $("#selCountry").children().not(":eq(0)").remove();
            //获取本身的选中的下拉列表的下标，也就是获取你所选中的省下的所有下拉框的下标,然后赋值给新建的空值
            iNum1 = $(this).children("option:selected").index();
            //选择你选中的省的下面的市
            var aaCity = aCity[iNum1-1];
            //遍历aaCity，把对应的事插入进去
            for(var i=0;i<aaCity.length;i++){
                $("#selCity").append("<option>"+aaCity[i]+"</option>");
            }
        });
        $("#selCity").change(function () {
            //获取到第三个标签，除却第一个下拉列表，其他的都清除
            $("#selCountry").children().not(":eq(0)").remove();
            //获取本身下的所有下拉列表的下标，然后赋给新建的空值
            iNum2 = $(this).children("option:selected").index();
            //选择上次选中的市，根据选中的市再往下获取
            var aaCountry = aCountry[iNum1-1][iNum2-1];
            //遍历aaCountry，把对应的事插入进去
            for(var i=0;i<aaCountry.length;i++){
                $("#selCountry").append("<option>"+aaCountry[i]+"</option>");
            }
        })
    })
</script>

实现四级菜单，五级菜单一样 ，以此类推