注:兼容ie,firefox,chrome
<!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">
<head>
<title></title>
<style type="text/css">
.power
{
width: 200px;
height: 350px;
overflow-y: scroll;
overflow-x: hidden;
border: 2px solid #ccc;
}
.power a
{
text-decoration: none;
color: #000;
font-weight: bold;
font-size: 15px;
font-family: Arial;
display: block;
height: 25px;
line-height: 25px;
}
.power ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
.power ul li
{
margin: 0;
padding: 0;
width: 190px;
cursor: pointer;
text-indent: 0.8em;
}
</style>
<script type="text/javascript">
function IsExist(obj, val) {
var b = false;
for (var i = 0; i < obj.options.length; i++) {
if (obj.options[i].value == val) {
b = true; break;
}
}
return b;
}
function libg(obj, event) {
var e = window.event || event;
if (obj.style.backgroundColor == "" || obj.style.backgroundColor == "#ffffff" || obj.style.backgroundColor == "rgb(255, 255, 255)") {
var parObj = obj.parentNode || obj.parentNode.parentNode;
var childs = parObj.children || parObj.childNodes;
if (e.ctrlKey) { obj.style.backgroundColor = "#3399ff"; return; } //是否按的ctrl鍵
// else { }
if (e.shiftKey) {////是否按的shift鍵
if (parObj != null) {
var numbStart = -1, numbEnd = -1;
for (var i = childs.length - 1; i >= 0; i--) {
if (childs[i].style.backgroundColor == "#3399ff" || childs[i].style.backgroundColor == "rgb(51, 153, 255)") {
numbStart = i;
break;
}
}
for (var i = 0; i < childs.length; i++) {
if (childs[i] == obj) { numbEnd = i; break; }
}
if (numbStart != -1) {
for (var k = Math.min(numbStart, numbEnd); k < Math.max(numbStart, numbEnd) + 1; k++) {
childs[k].style.backgroundColor = "#3399ff";
}
}
else
obj.style.backgroundColor = "#3399ff";
}
}
else {
obj.style.backgroundColor = "#3399ff";
for (var i = 0; i < childs.length; i++) {
if (childs[i] != obj)
childs[i].style.backgroundColor = "#ffffff";
}
}
}
else
obj.style.backgroundColor = "#ffffff";
}
function getChoose() {
var aCollect = document.getElementById("power").getElementsByTagName("a");
for (var i = 0; i < aCollect.length; i++) {
var nextObj = aCollect[i].nextSibling || aCollect[i].nextSibling.nextSibling;
if (nextObj.nodeName == "#text") nextObj = aCollect[i].nextSibling.nextSibling;
var liCollect = nextObj.getElementsByTagName("li");
for (var j = 0; j < liCollect.length; j++) {
if (liCollect[j].style.backgroundColor == "#3399ff" || liCollect[j].style.backgroundColor == "rgb(51, 153, 255)") {
var oValue = liCollect[j].getAttribute("class") || liCollect[j].getAttribute("className");
var oText = liCollect[j].innerHTML;
var opt = new Option(oText, oValue);
var selObj = document.getElementById("selRight");
if (IsExist(selObj, oValue)) { alert("當前添加的項:" + oText + "已存在,請重新確認!"); break; }
selObj.options.add(opt);
}
}
}
}
function delOption() {//刪除
var obj = document.getElementById("selRight");
for (var i = 0; i < obj.options.length; i++) {
if (obj.options[i].selected) {
obj.remove(i);
i = i - 1;
}
}
}
function hidNext(obj) {//隱藏
var nextObj = obj.nextSibling || obj.nextSibling.nextSibling;
if (nextObj.nodeName == "#text") nextObj = obj.nextSibling.nextSibling;
if (nextObj.style.display == "" || nextObj.style.display == "block")
nextObj.style.display = "none";
else
nextObj.style.display = "block";
}
</script>
</head>
<body>
<div>
<div class="power" id="power">
<a href="javascript:void(0)" onclick="hidNext(this)">字母哥</a>
<ul>
<li onclick="libg(this,event)" class="1">a </li>
<li onclick="libg(this,event)" class="2">b</li>
<li onclick="libg(this,event)" class="3">c</li>
</ul>
<a href="javascript:void(0)" onclick="hidNext(this)">顆顆姐</a>
<ul>
<li onclick="libg(this,event)" class="5">d</li>
<li onclick="libg(this,event)" class="6">e</li>
<li onclick="libg(this,event)" class="jim1">f</li>
</ul>
</div>
<input type="button" value="向右" onclick="getChoose()" />
<input type="button" onclick="delOption()" value="移除" />
<select id="selRight" multiple="multiple" style="width: 200px; height: 230px;">
</select>
</div>
</body>
</html>