码迷,mamicode.com
首页 > Web开发 > 详细

js实例7表框选项

时间:2016-12-16 23:08:17      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:item   function   height   i++   auto   oat   one   style   doc   

<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:500px; height:500px}
#left{ width:200px; height:500px; float:left}
#zhong{ width:100px; height:500px; float:left}
#right{ width:200px; height:500px; float:left}
</style>
</head>

<body>
<br />
<div id="wai">
<div id="left">
<select style="width:200px; height:300px" id="selleft" multiple="multiple">
<option value="山东">山东</option>
<option value="淄博">淄博</option>
<option value="张店">张店</option>
</select>
</div>
<div id="zhong">
<div style="margin-left:10px; margin-top:20px">
<input style="width:60px; height:30px" type="button" value=">>" onclick="moveall()" />
</div>

<div style="margin-left:10px; margin-top:30px">
<input style="width:60px; height:30px" type="button" value=">" onclick="moveone()" />
</div>
</div>
<div id="right">
<select id="selright" multiple="multiple" style="width:200px; height:300px"></select>
</div>
</div>


<script type="text/javascript">

function moveone()
{
var left = document.getElementById("selleft");
var right = document.getElementById("selright");

var xz = left.value;
var str = "<option value=‘"+xz+"‘>"+xz+"</option>";
//判断
//alert(right.childNodes.item(0));
var bs = 0;
for(var i=0;i<right.childNodes.length;i++)
{
if(right.childNodes.item(i).text==xz)
{
bs = 1;
}
}

if(bs==0)
{
//追加
right.innerHTML = right.innerHTML+str;
}
}

function moveall()
{
var left = document.getElementById("selleft");
var right = document.getElementById("selright");

right.innerHTML = left.innerHTML;
}

</script>

js实例7表框选项

标签:item   function   height   i++   auto   oat   one   style   doc   

原文地址:http://www.cnblogs.com/qdlj/p/6188443.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!