dom 按着shift多选-CSDN博客

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style>
body { margin: 0; padding: 0; }
ul { padding: 0; margin: 0; }
li { list-style: none; }
a { text-decoration: none; color: #000; display: block; }
#div1 { width: 250px; height: 20px; border: 1px solid #fe6601; padding: 5px; line-height:20px; margin: 20px auto 0 auto;}
#ul1 { margin: 0 auto; width: 260px; line-height: 20px; border: 1px solid #fe6601; display: none;}
#ul1 li a { padding: 5px; }
#ul1 li a:hover { background: #fe6601; color: #fff; }
</style>
<script type="text/javascript">
window.onload = function ()
{
    var odiv = document.getElementById('div1');
    var oul = document.getElementById('ul1');
    var arr = [];
    
    odiv.onclick = function (ev)
    {
        var ev = ev || event;
        ev.cancelBubble = true;
        oul.style.display = 'block';
    }
    
    for( var i = 0; i < oul.children.length; i++)
    {
        oul.children[i].onclick = function (ev)
        {
            var ev = ev || event;
            if(ev.shiftKey)
            {
                ev.cancelBubble = 'true';
            }
            
            for(var i = 0; i < arr.length; i++)
            {
                if(this.children[0].innerHTML == arr[i])
                {
                    arr.splice(i,1);
                    odiv.innerHTML = arr.join(',');
                    bgcolor();
                    return;
                }
            }
            arr.push ( this.children[0].innerHTML);
            odiv.innerHTML = arr.join(',');
            bgcolor();
            
            function bgcolor ()
            {
                for(var i = 0; i < oul.children.length; i++)
                {
                    oul.children[i].children[0].style.background = '';
                    oul.children[i].children[0].style.color = '';
                }
                
                var arr1 = odiv.innerHTML.split(',');
                for(var i = 0; i < arr1.length; i++)
                {
                    for(var j = 0; j < oul.children.length ; j++)
                    {
                        if(oul.children[j].children[0].innerHTML == arr1[i])
                        {
                            oul.children[j].children[0].style.background = '#fe6601';
                            oul.children[j].children[0].style.color = '#fff';
                        }
                    }
                }
            }
        }
    }
    
    document.onclick = function ()
    {
        oul.style.display = 'none';
        arr = [];
    }
};
</script>
</head>

<body>
    <div id="div1">按住shift多</div>
    <ul id="ul1">
        <li><a href="javascript:;">宋体</a></li>
        <li><a href="javascript:;">黑体</a></li>
        <li><a href="javascript:;">楷体</a></li>
        <li><a href="javascript:;">微软雅黑</a></li>
        <li><a href="javascript:;">新宋体</a></li>
        <li><a href="javascript:;">仿宋</a></li>
    </ul>
</body>
</html>