Web三级联动，无限联动下拉框（从数据库到页面）

MVC设计模式实例
先放一张效果图
数据库表设计

我的基础数据表都在一张表，可以参考我的表设计。
三键上下级关系设计，最后一个键是他上级的ID，实现上下级关系的确定。

先说说原理：无限联动下拉框是由文本框和无序列表组成，通过点击文本框实现自动查询出最外层的分类并显示出来，在点击分类查询下一级，直到没有下级分类就隐藏无序列表。并且，每次点击都把文本给回填到文本框显示出来，把ID回填到隐藏域，最终提交的对象就是隐藏域的ID。

第一步：Controller层数据查询

   public ActionResult SelectProductClass(int index) 
        {
            var list = myModels.Bs_Basics.Where(m => m.TypeID == 6 && m.Number == index).ToList();
            if (list.Count > 0)
              {
                return Json(list, JsonRequestBehavior.AllowGet);
            }
             else
            {
                return Json("", JsonRequestBehavior.AllowGet);
            }
        }

如果传递一个0过来查询的就是最外层的分类，如果没有下级分类返回一个空字符。

第二步：View层的数据渲染方法
在这之前先放出html代码与样式
html代码

     //储存ID的隐藏域
      //文本框显示
     //眼睛小图标（用于点击他隐藏下拉框）
    
     

css样式

  #Box{
            position:absolute;
            width:1000px;
            height:200px;
            top:36px;
            left:15px;
            z-index:2018;
        }
        #Box ul {
            overflow:auto;
            float:left;
            height:100%;
            width:160px;
            border: solid 1px #d1dbe5; 
            background:#ffffff;
            border-left:none;
        }
        #Box ul:first-child{
            border-left:solid 1px #d1dbe5; 
        }
        #Box ul li{
            font-size: 14px;
            padding: 8px 30px 8px 10px;
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #48576a;
            height: 36px;
            line-height: 1.5;
            box-sizing: border-box;
            cursor: pointer;
            text-align:left;
        }
        #Box ul li:hover{
            color: #fff;
            background-color: #20a0ff;
        }
        #Box ul .li{
            color: #fff;
            background-color: #20a0ff;
        }

数据渲染方法

    function Add(index) {
            var span = ''; //小箭头图标
            var AddValue = "";
            $.post("SelectProductClass?index=" + index, function (data) {  //传递参数进行提交
                if (data != '') {  //判断是否有数据，也就是是否有下级分类
                    $.each(data, function (i) {   //循环数据组合成无序列表，并且把该分类的ID保持在隐藏域中
                        var hidden = '';
                        AddValue += '
 ' + data[i].BasicsName + hidden + span + ' 
'
                    });
                    $("#Box").append('
 ' + AddValue + ' 
'); //追加到页面上
                } else {
                    openTo(); / //没有下级分类就隐藏下拉框 
                         }
            })
        }
          //显示隐藏
        function openTo() {  //判断无序列表组成的下拉框是什么状态，如果是显示就让他隐藏，隐藏就让他显示
            if ($("#Box")[0].style.display == "block") {
                $("#Box")[0].style.display = "none";
                $("#myspan")[0].style.display = "none"; //隐藏眼睛小图标
            } else {
                $("#Box")[0].style.display = "block";
            }
        }

第三步:无序列表的点击事件

var array = new Array(10); //创建数组保存每一层分类的类名（用于文本框显示）
$(document).on("click", '.click', function () { //给有类名为click的添加全局点击事件。（也就是给每一个li标签添加点击事件）
    var input = $("#ProductClass"); //获取显示文本框的标签后面进行赋值
    var number = $(this).find("input").val(); //获取点击对象中隐藏的ID
    $('#ProductForm [name="ProductClass"]').val(number); //把ID赋值给需要提交的隐藏域
    $(this).siblings().attr("class", "click"); //获取同辈元素把类更新为标准状态
    $(this).attr("class", "click li"); //把点击的这一个类设置为选中状态实现选中效果
    //每一层由一个ul组成，获取我点击的那一层的ul在父级的索引并加1（索引从零开始）
    var index = $(this).closest("ul").index() + 1; 
    var ul = $("#Box ul"); //获取所有的ul
    for (var j = index; j < ul.length; j++) {  //利用循环移除我后方的所有ul
        $(ul[j]).remove();
    }
     for (var i = index ; i < array.length; i++) { //利用循环把我后面的数组给清空
        array[i] = "";
    }
    array[index - 1] = $(this).text().trim();  //把该层数组的值保存在数组中
    var value = "";
    for (var k = 0; k < array.length; k++) {  //循环数组
        if ( array[k] != '') {
            value += array[k] + ' / ';
        }
    }
    value = value.substr(0,value.length - 2); //切割点后两位
    input.val(value); //赋值提示文本
    Add(number); //传递ID渲染下一层分类
});

第四步：焦点事件弹出下拉框。

        $("#ProductClass").focus(function () { //文本框的焦点事件
            openTo();  //显示
            $("#myspan")[0].style.display = "inline-block";   //显示眼睛小图标（眼睛小图标的点击事件会隐藏下拉框）
        });

——宋心成