zoukankan      html  css  js  c++  java
  • 在两个输入框之间移动内容

    <body>
    <select id=s1 multiple="multiple" size="7">
    <option>123</option>
    <option>234</option>
    <option>456</option>
    <option>678</option>
    <option>890</option>
    </select>

    <input type="button" id="r" value="向右" />
    <input type="button" id="l" value="向左" />

    <select id=s2 multiple="multiple" size="7">
    <option>asd</option>
    <option>qwe</option>
    <option>fed</option>
    <option>sfg</option>
    <option>ghj</option>
    </select><br />

    <input type="text" id="txt" />
    <input type="button" id="b" value="添加" />



    </body>
    </html>


    <script>
    var s1=document.getElementById("s1");
    var r=document.getElementById("r");
    var l=document.getElementById("l");
    var s2=document.getElementById("s2");
    var txt=document.getElementById("txt");
    var b=document.getElementById("b");

    //在输入框中添加内容

    b.onclick=function(){
    if (txt.value.trim()!="") {
    var op=document.createElement("option");
    op.innerText=txt.value;
    s1.appendChild(op);
    txt.value="";
    }

    }

    //向右移动内容

    r.onclick=function(){

    s2.appendChild(s1.selectedOptions[0]);
    }

    //向左移动内容
    l.onclick=function(){

    s1.appendChild(s2.selectedOptions[0]);
    }

  • 相关阅读:
    小程序(四):模板
    小程序(三):授权登录
    小程序(二)
    小程序(一)
    从零开始学习微信小程序
    flex 弹性布局
    如何使用docker进行shadsocks环境开发配置
    eclipse 设置注释模板
    idea 2019.1.3最新注册码
    centos7安装rabbitmq简单方式
  • 原文地址:https://www.cnblogs.com/dej-11/p/7446073.html
Copyright © 2011-2022 走看看