JavaScript实现下拉列表选择框
更新时间：2021年10月11日 11:27:55 作者：莎蛋蛋的盖世英雄啊
这篇文章主要为大家详细介绍了JavaScript实现下拉列表选择框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现下拉列表选择框的具体代码，供大家参考，具体内容如下
创建一个页面
** 两个下拉选择框
- 设置属性 multiple属性 -multiple="multiple"(下拉选择框多行显示)
** 四个按钮，有事件
tip:多选按住ctrl或者shift点击选项
代码如下:
<html >
<head>
<title>HTML示例</title>
<style type = "text/css">
div#left{
float:left;
}
</style>
</head>
<body>
<div id="left" ">
<div >
<select id="select1" multiple="multiple" style="width:100px;height:1ss00px">
<option>AAAAAA</option>
<option>BBBBBB</option>
<option>CCCCCC</option>
<option>DDDDDD</option>
<option>EEEEEE</option>
</select><br/>
</div>
<div>
<input type="button" value="选中添加到右边" onclick="selToRight()"/><br/>
<input type="button" value="全部添加到右边" onclick="selAllRight()"/>
</div>
</div>
<div id="right">
<div >
<select id="select2" multiple="multiple" style="width:100px;height:1ss00p">
<option>FFFFFF</option>
</select><br/>
</div>
<div>
<input type="button" value="选中添加到左边" onclick="selToLeft()"/><br/>
<input type="button" value="全部添加到左边" onclick="selAllLeft()"/>
</div>
</div>
</body>
<script type="text/javascript">
// 选中添加到左边
function selToLeft(){
//获取左边select对象
var s1 = document.getElementById("select1");
//获取右边select对象
var s2 = document.getElementById("select2");
//得到左边select对象中的每一个option
var ops = s2.getElementsByTagName("option");
for(var i4=0;i4<ops.length;i4++){
op4=ops[i4];
if(op4.selected==true){
s1.appendChild(op4);
i4--;
}
}
}
//全部添加到左边
function selAllLeft(){
//获取左边select对象
var s1 = document.getElementById("select1");
//获取右边select对象
var s2 = document.getElementById("select2");
//得到左边select对象中的每一个option
var ops = s2.getElementsByTagName("option");
for(var i3=0;i3<ops.length;i3++){
op3=ops[i3];
s1.appendChild(op3);
i3--;
}
}
//全部添加到右边
function selAllRight(){
//获取左边select对象
var s1 = document.getElementById("select1");
//获取右边select对象
var s2 = document.getElementById("select2");
//得到左边select对象中的每一个option
var ops = s1.getElementsByTagName("option");
for(var i2=0;i2<ops.length;i2++){
op2=ops[i2];
s2.appendChild(op2);
i2--;
}
}
//选中添加到右边
function selToRight(){
/*
步骤:
1.获取select里面的option
-getElementByTagName()-返回一个数组
-遍历数组,得到每一个option
2.判断option是否被选中
-属性selected,判断是否被选中
-selected=true;选中
-selected=false;未选中
3.如果选中,把选中的添加到右边
4.得到select2
5.添加选择的部分
-appendChild()方法
*/
//获取左边select对象
var s1 = document.getElementById("select1");
//获取右边select对象
var s2 = document.getElementById("select2");
//得到左边select对象中的每一个option
var ops = s1.getElementsByTagName("option");
//遍历ops数组得到每一个option选中状态
for(var i1=0;i1<ops.length;i1++){
op1 = ops[i1];
//判断每一个option中selected属性是否选中
if(op1.selected == true){
//如果选中,添加到右边select中
//-使用appendChild()方法
s2.appendChild(op1);
//每次添加都会使数组长度减一,i1++后长度出现异常,所以我们要--;
i1--;
}
}
}
</script>
</html>
效果图:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
有时候我们需要复制一个框的内容或者整个表格，一般的操作很可能造成一些不方便，一是操作步骤较为复制，一是复制表格的时候容易复制不完整或者格式出错。2011-04-04
关于JavaScript小数进行加、减、乘、除出现多位小数问题，自己研究了一下，而且作了相关的测试，收获不少知识点，需要的朋友可以参考下2015-10-10
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
这篇文章主要介绍了JavaScript中ParseInt("08")和“09”返回0的原因分析及解决办法的相关资料,需要的朋友可以参考下2016-05-05
用JS替换字符串时。只能替换掉字符串中第一个匹配对象,有时候需要替换全部的字符，下文是具体的实现方法，大家可以参考下2014-12-12
JavaScript中的剩余参数一般使用在**赋值号右侧,或具有迭代属性的数组、函数和对象,这篇文章主要为大家介绍了JavaScript中剩余参数的具体应用,需要的可以参考下2023-11-11
一直想为 SWFObject 这个JS的类库写一个推荐帖，因为他轻便，同时功能强大，为我们的开发带来了很大的便捷。2008-07-07
前端插件之Bootstrap Dual Listbox使用教程
这篇文章主要介绍了前端插件之Bootstrap Dual Listbox使用教程，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了js中将数字格式化为金额的方法，使用加减逗号处理金额，一个格式化金额的代码，有需要的朋友参考下2014-04-04
本文主要介绍了Javascript的this用法，具有很好的参考价值，有需要了解的朋友可以看看2017-01-01
这篇文章主要介绍了微信小程序学习笔记之函数定义、页面渲染,结合实例形式较为详细的分析了微信小程序中函数的定义、生命周期、模板调用、样式控制等操作技巧,并配合图文形式进行了详细说明,需要的朋友可以参考下2019-03-03
最新评论