单选多选与全选
就是点击按钮从左边把内容一道右边
| <!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"/> 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>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> |