您正在使用IPV4(3.236.253.192)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
虚位以待
2021年 冬至节 56
2021年 圣诞节 60
2022年 元 旦 67
2022年 春 节 98
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    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实现可拖动模态框 下一篇:使用JS显示倒计时数字时钟效果
    发布日期:2021/10/11
    手机扫二维码直达本页
    发布时间:14:34:00
    点击:226
    录入:壹家怡园
    相关文章
    Baidu
    YiJiaCMS 6.0.6.10688 Build 21.10.13(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021