html代码：

    <select id="level1Class" class="column-select" name="level1Class">
        <option value="0">请选择栏目</option>
    </select>
    <select id="level2Class" class="column-select" name="level1Class">
        <option value="0">请选择栏目</option>
    </select>
    <select id="level3Class" class="column-select" name="level1Class">
        <option value="0">请选择栏目</option>
    </select>

json数据：

    var fir_class = [{firId: 1,firName:"母婴儿童"},{firId: 2,firName:"美容彩妆"},{firId: 3,firName:"营养保健"}];
    var sec_class = [{secId: 1,secName:"奶粉",firId: 1},{secId: 2,secName:"营养辅食",firId: 1},
                        {secId: 3,secName:"面部护理",firId: 2},{secId: 4,secName:"男士护理",firId: 2},
                        {secId: 5,secName:"维生素",firId: 3},{secId: 6,secName:"胶囊",firId: 3}];
    var thi_class = [{thiID: 1,thiName:"品牌奶粉",secId: 1},{thiID: 2,thiName:"妈妈奶粉",secId: 1},
                        {thiID: 3,thiName:"粥/面条",secId: 2},
                        {thiID: 4,thiName:"洗面奶",secId: 3},
                        {thiID: 5,thiName:"男士洗面奶",secId: 4},
                        {thiID: 6,thiName:"维生素A",secId: 5},
                        {thiID: 7,thiName:"β胶囊",secId: 6}];

js代码：

    classColunm();
    function classColunm() {
        $.each(fir_class, function (k, p) {
            var option = "<option value='" + p.firId + "'>" + p.firName + "</option>";
            $("#level1Class").append(option);
        });

        $("#level1Class").change(function () {
            var selValue = $(this).val();
            $("#level2Class option:gt(0)").remove();//gt(0)前1个元素后的所有元素

            $.each(sec_class, function (k, p) {
                if (p.firId == selValue) {
                    var option = "<option value='" + p.secId + "'>" + p.secName + "</option>";
                    $("#level2Class").append(option);
                }
            });
        });
        $("#level2Class").change(function () {
            var selValue = $(this).val();
            $("#level3Class option:gt(0)").remove();

            $.each(thi_class, function (k, p) {
                if (p.secId == selValue) {
                    var option = "<option value='" + p.Id + "'>" + p.thiName + "</option>";
                    $("#level3Class").append(option);
                }
            });
        });
        $("#level1Class").change(function () {
            $("#level3Class option:gt(0)").remove();
        });

    }

思路：

先用jq遍历第一个json数据后放入第一个选择框中，将json定义的id值赋给option的value。当第一个选择框发生改变后触发后面的事件，如果第二个json数据中所对应的第一个josn的ID值等于它选择框的value值，那么在把第二个接送数据放入第二个下拉框中，第三个同理。

当前面的选择框发生改变后，清除后面的选择框的内容，保留第一个。

$(“#level3Class option:gt(0)”).remove();

这句意思是移除下拉框中的内容，只保留第一个。gt(0)意思就是：大于0