前端开发之js基础(4)
程序员文章站
2022-06-30 19:14:28
...
下拉列表
html代码
<body>
<div id="select_left">
<select name="left_box" multiple="multiple" id="select_left_box">
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
<option value="4">选项四</option>
<option value="5">选项五</option>
<option value="6">选项五</option>
</select>
<span id="add_all_right" onclick="all_right()">
全部右移
</span>
</div>
<div id="middle">
<span id="add_left" onclick="turnright()">
>>
</span>
<span id="add_right" onclick="turnleft()">
<<
</span>
</div>
<div id="select_right">
<select name="right_box" id="select_right_box" multiple="multiple">
<option value="7">选项七</option>
</select>
<span id="add_all_left" onclick="all_left()">
全部左移
</span>
</div>
</body>css代码
<style type="text/css">
#select_left{
width: 200px;
height: 400px;
float: left;
}
#select_right{
width: 200px;
height: 400px;
float: left;
margin-left: 50px;
}
#middle{
float: left;
margin-left: 40px;
margin-top: 100px;
}
#middle span{
background: rgba(0,0,0,0.8);
color: #fff;
cursor: pointer;
padding: 5px;
margin-left: 10px;
}
select{
width: 180px;
height: 200px;
}
#add_all_left{
padding: 5px;
width: 100px;
text-align: center;
margin-left: 30px;
display: block;
background: #888888;
border: 1px solid #888;
cursor: pointer;
}
#add_all_right{
padding: 5px;
width: 100px;
text-align: center;
margin-left:30px;
display: block;
background: #888888;
border: 1px solid #888;
cursor: pointer;
}
</style>js代码
<script type="text/javascript">
var select_left_box = document.getElementById("select_left_box");
var select_right_box = document.getElementById("select_right_box");
var op_left = select_left_box.getElementsByTagName("option");
var op_right = select_right_box.getElementsByTagName("option");
//全部添加到右边
function all_right(){
for(var i=0;i<op_left.length;i++){
var option = op_left[i];
select_right_box.appendChild(option);
i--;
}
}
//全部添加回左边
function all_left(){
for(var i=0;i<op_right.length;i++){
var option = op_right[i];
select_left_box.appendChild(option);
i--;
}
}
//点击右移
function turnright(){
for(var i=0;i<op_left.length;i++){
var option = op_left[i];
if(option.selected==true){
select_right_box.appendChild(option);
}
}
}
//点击左移
function turnleft(){
for(var i=0;i<op_right.length;i++){
var option = op_right[i];
if(option.selected==true){
select_left_box.appendChild(option);
}
}
}
//双击执行左右移动
var doubleleft = document.getElementById("select_left_box").ondblclick = turnright;
var doubleright = document.getElementById("select_right_box").ondblclick = turnleft;
</script>