您正在使用 IPV4 [3.235.186.149] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 005
2024年 劳动节 032
2025年 元 旦 277
2025年 春 节 305
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
JavaScript实现下拉列表选择框
内容摘要: htmlheadtitleHTML示例/titlestyletype='text/css'div#left{float:left;}/style/headbodydivid='left''divselectid='select1'multiple='multiple'style='width:100px;height:1ss00px'optionAAAAAA......
<html>

<head>

<title>HTML示例</title>

<styletype="text/css">

div#left{

float:left;

}

</style>

</head>

<body>

<divid="left"">

<div>

<selectid="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>

<inputtype="button"value="选中添加到右边"onclick="selToRight()"/><br/>

<inputtype="button"value="全部添加到右边"onclick="selAllRight()"/>

</div>

</div>

<divid="right">

<div>

<selectid="select2"multiple="multiple"style="width:100px;height:1ss00p">

<option>FFFFFF</option>

</select><br/>

</div>

<div>

<inputtype="button"value="选中添加到左边"onclick="selToLeft()"/><br/>

<inputtype="button"value="全部添加到左边"onclick="selAllLeft()"/>

</div>

</div>

</body>

<scripttype="text/javascript">

//选中添加到左边

functionselToLeft(){

//获取左边select对象

vars1=document.getElementById("select1");

//获取右边select对象

vars2=document.getElementById("select2");

//得到左边select对象中的每一个option

varops=s2.getElementsByTagName("option");

for(vari4=0;i4<ops.length;i4++){

op4=ops[i4];

if(op4.selected==true){

s1.appendChild(op4);

i4--;

}

}

}

//全部添加到左边

functionselAllLeft(){

//获取左边select对象

vars1=document.getElementById("select1");

//获取右边select对象

vars2=document.getElementById("select2");

//得到左边select对象中的每一个option

varops=s2.getElementsByTagName("option");

for(vari3=0;i3<ops.length;i3++){

op3=ops[i3];

s1.appendChild(op3);

i3--;

}

}

//全部添加到右边

functionselAllRight(){

//获取左边select对象

vars1=document.getElementById("select1");

//获取右边select对象

vars2=document.getElementById("select2");

//得到左边select对象中的每一个option

varops=s1.getElementsByTagName("option");

for(vari2=0;i2<ops.length;i2++){

op2=ops[i2];

s2.appendChild(op2);

i2--;

}

}

//选中添加到右边

functionselToRight(){

/*

步骤:

1.获取select里面的option

-getElementByTagName()-返回一个数组

-遍历数组,得到每一个option

2.判断option是否被选中

-属性selected,判断是否被选中

-selected=true;选中

-selected=false;未选中

3.如果选中,把选中的添加到右边

4.得到select2

5.添加选择的部分

-appendChild()方法

*/

//获取左边select对象

vars1=document.getElementById("select1");

//获取右边select对象

vars2=document.getElementById("select2");

//得到左边select对象中的每一个option

varops=s1.getElementsByTagName("option");

//遍历ops数组得到每一个option选中状态

for(vari1=0;i1<ops.length;i1++){

op1=ops[i1];

//判断每一个option中selected属性是否选中

if(op1.selected==true){

//如果选中,添加到右边select中

//-使用appendChild()方法

s2.appendChild(op1);

//每次添加都会使数组长度减一,i1++后长度出现异常,所以我们要--;

i1--;

}

}

}

</script>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JavaScript实现可拖动模态框

 

下一篇:CSS实现半透明div层的方法

发布日期:2021/10/11
手机扫二维码直达本页
发布时间:14:34:00
点  击:10
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....