zoukankan      html  css  js  c++  java
  • 关于JS的DOM操作——重要实例的操作

    1.复选框与按钮的配合使用的DOM操作

    <body>
            
            <input type="checkbox" id="ckb1" /><br><br>
            <input type="button" value="下一步" id="btn1" disabled="disabled" />

    </body>
            
            <script>
                
                document.getElementById('ckb1').onclick = function(){
                var ckb1 = document.getElementById('ckb1');
                var btn1 = document.getElementById('btn1');
                
                if(ckb1.checked){
                    btn1.removeAttribute('disabled');
                }
                else{
                    btn1.setAttribute('disabled','');
            }
        }
            </script>

    2.下拉列表、文本框与按钮配合使用的DOM操作(两种方法)

    <body>

    <select id="skd" size="7" style=" 100px;"></select><br>
            <select id="slt" size="7" style=" 100px;"></select><br>
            <input type="text" id="ipt2" /><br>
            <input type="text" id="txt" /><br>
            <input type="button" id="btn2"  value="添加"/>
     </body>       
            <script>
                //第一种方法(拼字符串)
                
    //            document.getElementById('btn2').onclick = function(){
    //                var ipt2= document.getElementById('txt').value;
    //                var skd = document.getElementById('skd');
    //                skd.innerHTML += "<option>"+ ipt2  +"</option>";
    //                document.getElementById('ipt2').value="";
    //            }
                
                //第二种方法(造元素)
                
                var txt = document.getElementById('txt');
                var slt = document.getElementById('slt');
                
                document.getElementById('btn2').onclick = function(){    
    //            新建一个option对象
                var opt = document.createElement('option');
    //            设置option对象的值(指向赋值)
                opt.value = txt.value;
    //            设置option对象的内容
                opt.innerHTML = txt.value;
    //            添加到slt(名)的对象
                slt.appendChild(opt);
            }

       </script>

    3.下拉列表与按钮的双向交换效果

    <body>
            
            <select id="oldSelect" size="10" multiple="multiple" style=" 100px;float: left;position: relative">
                <option >北京</option>
                <option >上海</option>
                <option >上海</option>
                <option >深圳</option>
                <option >香港</option>
            </select>
            <select id="newSelect" size="10" multiple="multiple" style=" 100px;float: left;margin-left: 20px;position: relative;">
                <option >篮球</option>
                <option >游泳</option>
                <option >击剑</option>
                <option >排球</option>
                <option >举重</option>
            </select>
            
            <br><br><br><br><br><br><br><br><br><br>
            
            <input type="button" id="btn1" value="添加到右" style="float: left;"/>
            <input type="button" id="btn2" value="添加到左" style="float: left;margin-left: 50px;"/>
            
            <script>
                
                document.getElementById('btn1').onclick=function(){
                    
                    var oldSelect = document.getElementById('oldSelect');
                    
                        for(var i=0;i<oldSelect.options.length;i++){
                            if(oldSelect.options[i].selected){
                            var newSelect = document.getElementById('newSelect');
                            newSelect.appendChild(oldSelect.options[i]);
                        }
                    }
                        alert(oldSelect.options[oldSelect.options.length].value);
                }
                
                    document.getElementById('btn2').onclick=function(){
                    
                    var newSelect = document.getElementById('newSelect');
                    
                        for(var i=0;i<newSelect.options.length;i++){
                            if(newSelect.options[i].selected){
                            var oldSelect = document.getElementById('oldSelect');
                            oldSelect.appendChild(newSelect.options[i]);
                        }
                    }
                        alert(newSelect.options[newSelect.options.length].value);
                }

    </script>

  • 相关阅读:
    关于MySql 数据库InnoDB存储引擎介绍
    .netcore 中使用开源的AOP框架 AspectCore
    C#关于反序列化实例时,接收实体字段少于或大于原实体对象 解析测试
    PostgreSQL TIMESTAMP类型 时间戳
    C# 新特性 操作符单?与??和 ?. 的使用
    PostgreSQL 常用函数
    AutoCAD.Net/C#.Net QQ群:193522571 previewicon生成的块图标太小,CMLContentSearchPreviews生成大的图片
    C#winform中OpenFileDialog的用法
    C# winform datagridview 无需点击两次即可编辑内嵌控件的方法和删除默认的空行的方法
    C# winform datagridview 内嵌控件值改变后立即触发事件,而不需要离开该单元格时才触发,此时需要用到dgv_CurrentCellDirtyStateChanged事件
  • 原文地址:https://www.cnblogs.com/jly144000/p/7252548.html
Copyright © 2011-2022 走看看