模拟select移动(左边不为select,右边为select)
2011-01-25 14:06
615 查看
注:兼容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>
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 左边select内容选择到右边select内容里面的js实现方法（可以多选和全选）
- 左边select内容选择到右边select内容里面的js实现方法（可以多选和全选）
- 左边select内容选择到右边select内容里面的js实现方法（可以多选和全选）
- 模拟选择项左边移动到右边的功能
- 左边select添加到右边select框
- 将后台中获取的值传到select，并将左边select的值移到右边，将select的全部值传到后台
- JS左边select内容选择到右边select内容里面的js实现方法（可以多选和全选）
- select标签左边集合和右边集合 ，添加，移除， 多选添加，移除功能
- 自定义select模拟--基于jQuery
- 两个div标签，控制标签左边固定，右边自适应（滴滴面试题）
- CSS控制左边固定，右边自由伸展
- 点击左边frame里的链接在右边的frame里打开
- 给定一个存放整数的数组，重新排列数组使得数组左边为奇数，右边为偶数
- 按钮 图片调整到右边 文字到左边
- word左边左对齐，右边右对齐
- 将一个数组中所有的奇数放左边，偶数放右边，且原来数字的相对位置不变
- 用栈来实现求数组中每个元素的左边第一个小和右边第一个小 -2014-03-26 20:35
- Android之Toolbar的三个问题：修改左边箭头颜色、怎样修改右边以及子activity中的toolbar添加返回箭头
- jquery input 下拉框(模拟select控件)焦点事件
- 右边宽度固定，左边宽度自适应