当前位置：首页 → 问答吧 → 关于 js 无限级关联下拉选择

关于 js 无限级关联下拉选择

时间：2011-12-12

来源：互联网

JScript code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
test <!-- 这个也不能去掉, 变态ie6去了test就报错了。-->

<div id="sort">
</div>

<script>
// 创建元素 
var C = function (tag)
{
    return (typeof(tag) != 'object') ? document.createElement(tag) : tag;
}
// 取得元素
var G = function (id)
{
    return document.getElementById(id);
}
// 生成下拉框
function CreatesSelect (arr, name, de_name)
{
    if(typeof(name) != 'string') name = '';
    name = name.toUpperCase();
    var selected = false;
    var S = C('select');
    for (x in arr )
    {
        if (typeof(arr[x]) != 'object')
        {
            var O = C('option');
            S.options.add(O);
            var arr_split = arr[x].split('|');
            if(arr_split.length > 1)
            {
                O.text = de_name ? decodeURI(arr_split[0]) : arr_split[0];
                O.text = O.text.replace('%2F','/');
                O.value = arr_split[1];
            }
            else
                O.text = O.value = arr[x];

            if(O.text.toUpperCase() == name) 
                selected = O.selected = true;
        }
    }
    return S;
}

var sort = [{"ac_id":"790","ac_name":"%E5%86%85%E7%A7%91","small":{"data":[{"ac_id":"940","parent_id":"790","ac_name":"%E5%91%BC%E5%90%B8%E5%86%85%E7%A7%91","now":0,"url":"xuq9c86d7c0eb.html","small":{"data":[]}},{"ac_id":"939","parent_id":"790","ac_name":"%E5%BF%83%E8%A1%80%E7%AE%A1%E5%86%85%E7%A7%91","now":0,"url":"xrx92a833a943.html","small":{"data":[]}},{"ac_id":"1082","parent_id":"790","ac_name":"%E6%B6%88%E5%8C%96%E5%86%85%E7%A7%91","now":0,"url":"pqys8ef217da0.html","small":{"data":[]}},{"ac_id":"1080","parent_id":"790","ac_name":"%E8%82%BE%E5%86%85%E7%A7%91","now":0,"url":"pqyq83d230b79.html","small":{"data":[]}},{"ac_id":"941","parent_id":"790","ac_name":"%E7%A5%9E%E7%BB%8F%E5%86%85%E7%A7%91","now":0,"url":"xup9f617aa221.html","small":{"data":[]}},{"ac_id":"1083","parent_id":"790","ac_name":"%E5%86%85%E5%88%86%E6%B3%8C%E7%A7%91","now":0,"url":"pqyr8843a7b7b.html","small":{"data":[]}},{"ac_id":"938","parent_id":"790","ac_name":"%E8%A1%80%E6%B6%B2%E7%A7%91","now":0,"url":"xry915ccc1bd1.html","small":{"data":[]}},{"ac_id":"1081","parent_id":"790","ac_name":"%E9%A3%8E%E6%B9%BF%E7%A7%91","now":0,"url":"pqyp8782ae06f.html","small":{"data":[]}}]}},{"ac_id":"794","ac_name":"%E7%9A%AE%E8%82%A4%E7%A7%91","small":{"data":[]}},{"ac_id":"146","ac_name":"%E4%BA%BA%E4%BD%93%E5%B8%B8%E8%AF%86","small":{"data":[]}},{"ac_id":"143","ac_name":"%E7%B2%BE%E7%A5%9E%E5%BF%83%E7%90%86%E7%A7%91","small":{"data":[]}},{"ac_id":"140","ac_name":"%E4%B8%AD%E5%8C%BB","small":{"data":[]}},{"ac_id":"796","ac_name":"%E4%BC%A0%E6%9F%93%E7%A7%91","small":{"data":[]}},{"ac_id":"930","ac_name":"%E7%94%B7%E7%A7%91","small":{"data":[]}},{"ac_id":"795","ac_name":"%E4%BA%94%E5%AE%98%E7%A7%91","small":{"data":[{"ac_id":"1088","parent_id":"795","ac_name":"%E7%9C%BC%E7%A7%91","now":0,"url":"pqyy8cb07e3cc.html","small":{"data":[]}},{"ac_id":"1090","parent_id":"795","ac_name":"%E5%8F%A3%E8%85%94%E7%A7%91","now":0,"url":"pqxq86a897f00.html","small":{"data":[]}},{"ac_id":"1089","parent_id":"795","ac_name":"%E8%80%B3%E9%BC%BB%E5%96%89%E7%A7%91","now":0,"url":"pqyx81cf0cae4.html","small":{"data":[]}}]}},{"ac_id":"793","ac_name":"%E5%84%BF%E7%A7%91","small":{"data":[]}},{"ac_id":"792","ac_name":"%E5%A6%87%E4%BA%A7%E7%A7%91","small":{"data":[{"ac_id":"931","parent_id":"792","ac_name":"%E5%A6%87%E7%A7%91","now":0,"url":"xrp9295635e63.html","small":{"data":[]}},{"ac_id":"935","parent_id":"792","ac_name":"%E4%BA%A7%E7%A7%91","now":0,"url":"xrt986c4fa0e4.html","small":{"data":[]}}]}},{"ac_id":"770","ac_name":"%E8%82%BF%E7%98%A4%E7%A7%91","small":{"data":[]}},{"ac_id":"791","ac_name":"%E5%A4%96%E7%A7%91","small":{"data":[{"ac_id":"1091","parent_id":"791","ac_name":"%E5%BF%83%E8%83%B8%E5%A4%96%E7%A7%91","now":0,"url":"pqxp85c78d953.html","small":{"data":[]}},{"ac_id":"1085","parent_id":"791","ac_name":"%E8%84%91%E5%A4%96%E7%A7%91","now":0,"url":"pqyt87e4a6cb4.html","small":{"data":[]}},{"ac_id":"1087","parent_id":"791","ac_name":"%E8%82%9D%E8%83%86%E5%A4%96%E7%A7%91","now":0,"url":"pqyv8ed53ffb8.html","small":{"data":[]}},{"ac_id":"1084","parent_id":"791","ac_name":"%E6%B3%8C%E5%B0%BF%E5%A4%96%E7%A7%91","now":0,"url":"pqyu80c8f9278.html","small":{"data":[]}},{"ac_id":"936","parent_id":"791","ac_name":"%E9%AA%A8%E7%A7%91","now":0,"url":"xrw9baeb89169.html","small":{"data":[]}},{"ac_id":"1086","parent_id":"791","ac_name":"%E8%82%9B%E8%82%A0%E5%A4%96%E7%A7%91","now":0,"url":"pqyw88cab47f8.html","small":{"data":[]}},{"ac_id":"937","parent_id":"791","ac_name":"%E5%A4%96%E4%BC%A4%E7%A7%91","now":0,"url":"xrv9703ff0c5e.html","small":{"data":[]}}]}},{"ac_id":"1193","ac_name":"%E5%8C%BB%E9%99%A2","small":{"data":[]}}];

var sort_object = [];

function set_son(_arr, rank)
{
    sort_object.splice(rank, 10);
    if(_arr.length == 0) {
        show_sort();
        return;
    }
    var s_arr = [];
    for (k in _arr )
    {
        s_arr[k] = _arr[k].ac_name + '|' + _arr[k].ac_id +  '-' + k;
    }
    var son = CreatesSelect(s_arr, '', true);
    son.rank = rank;
    son.name = 'sort_' + rank;
    
    son.onchange = function ()
    {
        var arr = this.value.split('-');
        set_son(_arr[arr[1]].small.data, son.rank+1);
    }

    set_son(_arr[0].small.data, son.rank+1);
     
    sort_object[rank] = son;
    show_sort();
}

set_son(sort, 0);


function show_sort()
{
    G('sort').innerHTML = '';
    for (k in sort_object)
    {
        G('sort').appendChild(sort_object[k]);
    }
}


</script>