jquery小练习 单选多选 二级联动 员工信息的添加与删除

Posted wxldlxt

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery小练习 单选多选 二级联动 员工信息的添加与删除相关的知识，希望对你有一定的参考价值。

单选多选与全选

就是点击按钮从左边把内容一道右边

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
    <script type="text/javascript">
        $(function(){
            $("#button1").click(function(){
                $("#sel1 option:selected").each(function(){
                    $("#sel2").append($(this));
                    return false;
                    
                })    
            })
            
            
            $("#button3").click(function(){
                $("#sel1 option:selected").each(function(){
                    $("#sel2").append($(this));
                    
                })    
            })
            
            $("#button2").click(function(){
                $("#sel1 option").each(function(){
                    $("#sel2").append($(this));
                    
                })    
            })
            
        })
        
    </script>
    <body>
        <select style="height: 100px;" multiple="multiple" id="sel1">
            <option>河南</option>
            <option>青岛</option>
            <option>北京</option>
            <option>山东</option>
            <option>南阳</option>
        </select>
        <button id="button1">单选</button>
        <button id="button3">多选</button>
        <button id="button2">全选</button>
        <select multiple="multiple" style="height: 100px;" id="sel2">
            
        </select>
        
    </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

二级联动

意思是根据左边选择的option的不同，会有不同的右边选项

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
    <script type="text/javascript">
        $(function (){
            $("#sel1").change(function(){
                var array=[["---请选择---"],["qqqq","qqq","qq","q","qqqqq"],["wwww","www","ww","w"],["eee","ee","e"],["rrr","rr","r"]];
                var $a=$("#sel1 option:selected");
                var $i=0;
                $("#sel2 option").each(function(){
                    $(this).remove();
                })
                    
                $("#sel1 option").each(function(){
                    if($(this).text()==$a.text()){
                        $.each(array, function(j) {
                            if(array[$i][j]!=null)
                            $("#sel2").append("<option>"+array[$i][j]+"</option>");
                            
                            
                        });
                    }
                    $i++;
                })
                
            })
            
        })
        
        
    </script>
    <body>
        <select id="sel1">
            <option>---请选择---</option>
            <option>北京市</option>
            <option>河南省</option>
            <option>河北省</option>
            <option>山东省</option>
        </select>
        
        <select id="sel2">
            
        </select>
        
    </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

员工信息的添加与删除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
    
    $(function(){
        $("#addEmpButton").click(function(){
              $("tbody").append("<tr><td>"+$("#name").val()+"</td><td>"+$("#email").val()+"</td><td>"+$("#salary").val()+"</td><td><a href=‘#‘>删除</a></td></tr>").find("a").click(function(){
                  return shanchu(this)
              });
        $("#name").val("");
         $("#email").val("");
         $("#salary").val("");
        })
        
        $("tbody a").click(function(){
        return shanchu(this);
    })
    
    
    
    function shanchu(a){
            var $a=$(a);
            a.parentNode.parentNode.remove();
            
            
            
        }
        
        
        
    })
    
    
    
</script>
</head>
<body>

    <center>
        <br> <br> 添加新员工 <br> <br> name: <input type="text"
            name="name" id="name"/>&nbsp;&nbsp; email: <input type="text"
            name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"
            name="salary" id="salary" /> <br> <br>
        <button id="addEmpButton" value="abc">Submit</button>
        <br> <br>
        <hr>
        <br> <br>
        
        
        
        
        <table id="employeetable" border="1" cellpadding="5" cellspacing=0>
            <tbody>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Salary</th>
                    <th>&nbsp;</th>
                </tr>
                <tr>
                    <td>Tom</td>
                    <td>[email protected]</td>
                    <td>5000</td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>
                        Jerry
                    </td>
                    <td>[email protected]</td>
                    <td>8000</td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>[email protected]</td>
                    <td>10000</td>
                    <td><a href="#">Delete</a></td>
                </tr>
            </tbody>
        </table>
    </center>

</body>
</html>

以上是关于jquery小练习 单选多选 二级联动 员工信息的添加与删除的主要内容，如果未能解决你的问题，请参考以下文章

jQuery操作下拉列表以及单选多选框

Jquery获取列表中的值和input单选多选框控制选中与取消

JQuery 当点击input后，单选多选的选中状态

IT小鲜肉 Widgets Tree 单选多选相关回调函数获取选中的节点功能

bootstrap datatable项目封装支持单选多选

form的编辑与展示的切换(输入框，单选多选框，上传图片，颜色选择器)适用个人信息的展示与修改