dom 筛选器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
dd {
        cursor: pointer;
    }
</style>
<script type="text/javascript">
window.onload = function ()
{
    var odl = document.getElementsByTagName('dl');
    var odiv = document.getElementById('div1');
    var location = '';
    var position = '';
    var salary = '';
    
    for(var i = 0; i < odl.length; i++)
    {
        fn(i);
    }
    
    function fn(n)
    {
        var odd = odl[n].getElementsByTagName('dd');
        for(var i = 0; i < odd.length; i++ )
        {
            odd[i].onclick = function ()
            {
                switch(n)
                {
                    case 0:
                    location = this.innerHTML + ' ';
                    break;
                    case 1:
                    position = this.innerHTML + ' ';
                    break;
                    case 2:
                    salary = this.innerHTML + ' ';
                    break;
                }
                odiv.innerHTML  = location + position + salary;
            };
        }
    }
}
</script>
</head>

<body>
    <dl>
        <dt>地区</dt>
        <dd>东城</dd>
        <dd>西城</dd>
        <dd>朝阳</dd>
        <dd>昌平</dd>
    </dl>
    <dl>
        <dt>职位</dt>
        <dd>美工设计</dd>
        <dd>前端工程师</dd>
        <dd>后台开发</dd>
    </dl>
    <dl>
        <dt>薪资</dt>
        <dd>4000</dd>
        <dd>5000</dd>
        <dd>6000</dd>
    </dl>
    <div id="div1"></div>
</body>
</html>
原文地址:https://www.cnblogs.com/mayufo/p/4208933.html