大佬教程收集整理的这篇文章主要介绍了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); }) @R_768_3816@ 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"/> email: <input type="text" NAME="email" id="email" /> 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> </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小练习 单选多选 二级联动 员工信息的添加与删除所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。