Question

求一个简单的jquery二级菜单联动

在做一个选项功能，不用从数据库读数据。比如第一大类下是水果和蔬菜，第二大类下是相应的苹果、西瓜或菠菜，土豆什么的。。。。。在网上找到一些代码一直没调试成功，求一个能实际运行的简单代码

Answer 1

var data = [{
    id: 1,
    pid: 0,
    name: '水果'
},
{
    id: 2,
    pid: 0,
    name: '蔬菜'
},
{
    id: 3,
    pid: 1,
    name: '苹果'
},
{
    id: 4,
    pid: 1,
    name: '香蕉'
},
{
    id: 5,
    pid: 2,
    name: '萝卜'
},
{
    id: 6,
    pid: 2,
    name: '茄子'
},
{
    id: 7,
    pid: 1,
    name: '芒果'
},
{
    id: 8,
    pid: 1,
    name: '桔子'
},
{
    id: 9,
    pid: 2,
    name: '青瓜'
},
{
    id: 10,
    pid: 2,
    name: '苦瓜'
}];
window.onload = function() {
    var type_sel = document.createElement('select');
    if (document.attachEvent) type_sel.attachEvent('onchange', change);
    else type_sel.addEventListener('change', change, true);
    createOptions(type_sel, 0);
}
function change(e) {
    var o = e.srcElement || e.target,
    child_sel = document.createElement('select'),
    pid = o.value,
    obj = document.getElementsByTagName('select')[1];
    obj && obj.parentNode.removeChild(obj);
    createOptions(child_sel, pid);
}
function createOptions(sel, pid) {
    var option = document.createElement('option');
    option.value = '';
    option.innerHTML = '请选择';
    sel.appendChild(option);
    for (var i in data) {
        var d = data[i];
        if (d.pid == pid) {
            var option = document.createElement('option');
            option.value = d.id;
            option.innerHTML = d.name;
            sel.appendChild(option);
        }
    }
    document.body.appendChild(sel);
}

Answer 2

有一个是jQuery插件叫mcdropdown4062下拉后可以显示多级菜单2我觉得可以替代多级联动下拉列表

Answer 3

这个是我刚才敲的，虽然很简单，收你5财富值。哈哈