jquery实现 单选多选 二级联动 员工信息的添加与删除

最新推荐文章于 2022-04-06 21:45:53 发布
最新推荐文章于 2022-04-06 21:45:53 发布
阅读量234 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wxldlxt/p/10921825.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(){
            $("#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>tom@tom.com</td>
                    <td>5000</td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>
                        Jerry
                    </td>
                    <td>jerry@sohu.com</td>
                    <td>8000</td>
                    <td><a href="#">Delete</a></td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>bob@tom.com</td>
                    <td>10000</td>
                    <td><a href="#">Delete</a></td>
                </tr>
            </tbody>
        </table>
    </center>

</body>
</html>

转载于:https://www.cnblogs.com/wxldlxt/p/10921825.html

weixin_30420305
关注
jQuery购物车多选框三级联动
m0_66128306的博客
11-24 461
仿淘宝购物车 多选框三级联动 仅限于实现功能
jquery省市二级联动多选
07-31
NULL 博文链接：https://nkliuliu.iteye.com/blog/983020
可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表，有demo
11-09
可以放到项目中用 mutiselect 下拉多选插件 可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表，有demo
jquery 手机端二级联动选择
07-06
jquery 手机端省市二级联动选择代码，可以自己修改。
jquery 多个checkbox的联动选择
Yannis的技术之路
04-10 976
jquery实现。多级checkbox的联动问题解决办法。注意引入jquery啊。 效果图如下：图片不知道怎么编辑进来，已经上传。可以看看样子。 <!-- function checkboxall(){ if($("#oneCheck").attr("checked")=="checked"){ //全选 $("#oneCheck").a
【Jquery 插件】一个小巧的jquery 三级联动多选插件
weixin_30323631的博客
10-12 246
今天做了一个小巧的jquery 三级联动多选插件，时间仓促，没有做太多的优化和更多的通用性设计。 希望以此来接受园子里朋友的指正，完善这个插件。 先上图： 用法： 1.在页面添加元素： <ul id="selected"></ul><div id="selecter"></div> 当然也可以自定义 2.引用脚...
Jquery实现省市区三级联动多选.zip
10-09
"Jquery实现省市区三级联动多选"是一个典型的前端技术应用，它解决了传统二级联动或三级联动一对一模式的问题，引入了多选功能，使得用户在选择省市区时可以有更大的自由度。 一、jQuery简介 jQuery是一个快速、...
多级联动插件(单选多选)tntreebox插件
06-01
"tntreebox插件"的设计目标是实现多级联动，其中一级支持单选，而二级和三级则支持多选。这样的设计可以满足复杂的用户需求，让用户在有限的屏幕空间内方便地进行多层次的筛选和选择。 在实际应用中，"tntreebox.js...
PHP+jQuery二级分类单选和多选弹出层
11-10
在这个"PHP+jQuery二级分类单选和多选弹出层"项目中，我们主要探讨的是如何利用这两种技术来实现一种交互性强、用户体验良好的分类选择功能。这个功能在电商网站、信息填写表单等场景中非常常见，它允许用户在弹出层...
jQuery实现的多选框多级联动插件
12-11
jQuery 实现的多选框联动插件 代码如下: // 使用：$(_event_src_).autoSelect(_reload_, reload_url); // 前台用get方法传输<select>标签的属性”name”和选中的属性”value” // 后台用json格式传输数据 // 格式: { value:的属性”value”, text:的显示文本 } (function($) { $.fn.extend({ autoSelect: function(dest, url) { return this.each(function() {
jquery checkbox 二级联动
11-11
仅供学习，有兴趣可以看看，高手勿入。代码很简单的。
JQuery实现二级联动
qq_43379611的博客
04-06 1448
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>二级联动_JQ</title> <style> </style> <script src="jquery-1.9.1.min.js"></script> </head> <body> <!--下拉框.
JQuery实现动态数据二级联动
蕉下客
07-13 5900
写此博客原因：项目中需要二级联动，点击一级学科，联动到二级学科，上网查了资料，都写的是从前台获取，很不满意，决定自己写一个二级联动！JQuery：$(function() { //ajax实现二级联动 $.post("${basePath}field/getjson.action",function(data){ if(data){ var field = ""; for(var i=0
JS&jQuery全选反选父项子项联动多选框
weixin_30510153的博客
04-09 130
全选反选父项子项联动多选框js代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选</title></head><body><input type="checkbox" id="btn1"&g...
layui多级联动下拉框的实现_jquery基于layui实现二级联动下拉选择(省份城市选择)...
weixin_30849279的博客
12-31 675
先看一下简单的效果直接上代码html部分 (下拉框中value的数值我是根据数据库中取出来)城市北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南省湖北省湖南省广东省广西壮族自治区海南省重庆市四川省贵州省云南省西藏自治区陕西省甘肃省青海省宁夏回族自治区新疆维吾尔自治区台湾省香港特别行政区澳门特别行政区js操作部分form.on('select(p...
简单的jquery表单验证+添加+删除+全选/反选
weixin_30387799的博客
09-10 145
//布局 1 <body> 2 <h4><a href="#">首页</a>&gt;<a href="#">延时预约</a></h4> 3 <div class="mesg"> 4 <p>请您认真填写以下信息.请您认真填写以下信息.请您...
jQuery获取及设置单选框、多选框、文本框
suweierxing的专栏
01-13 1278
jQuery获取及设置单选框、多选框、文本框  获取一组radio被选中项的值  findKind 为单选框的值  var item = $("input[name='findKind']:checked").val();  var item = $("input[name='findKind']").val();  隐藏单选框  $("input[name='findKind']").
表单验证+二级联动+添加+全选/反选+删除
你的孤独，虽败犹荣的博客
12-10 298
.botn {                 width: 80px;                 height: 30px;                 background-color: greenyellow;                 border: 1px solid black;                 border-radius:5px ;   
部门人员多选页面---
qq_37151646的博客
12-02 2600
Bootstrap 101 Template var arry = new Array();//存在人员名字 var divIds = new Array();//存在divId function selectMamber(obj){ var className=$(obj).attr("class"); v
jQuery实现单选多选按钮美化特效教程
资源摘要信息:"jQuery单选,多选按钮(美化特效)" 知识点概述： 本资源是一套基于jQuery和CSS3技术开发的表单控件美化解决方案，提供了对传统HTML单选按钮和多选按钮的视觉美化和交互增强。通过使用jQuery库与CSS3的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值