multiselect2side:jQuery多选列表框插件
http://blog.csdn.net/rosanu_blog/article/details/8550723
http://www.bkjia.com/jQuery/449193.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="多选列表框,jquery插件" /> <meta name="description" content="Helloweba演示平台,演示XHTML、CSS、jquery、PHP案例和示例" /> <title>操作多选列表框</title> <link rel="stylesheet" type="text/css" href="jquery.multiselect2side.css" /> <style type="text/css"> .demo2{width:600px; margin:40px auto; color:#424242; background:#fff} </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript" src="jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="jquery.multiselect2side.js"></script> <script type="text/javascript"> $(function(){ $("#liOption").multiselect2side({ selectedPosition: 'right', moveOptions: true, labelsx: '待选区', labeldx: '已选区' }); }); </script> </head> <body> <div id="main"> <form id="sel_form" action="posts.php" method="post"> <div id="sel"> <select name="abc" id='liOption' multiple='multiple' size='8' > <option value="PHP">PHP</option> <option value="MYSQL">MYSQL</option> <option value="ASP.NET">ASP.NET</option> <option value="XHTML">XHTML</option> <option value="CSS">CSS</option> <option value="JQUERY">JQUERY</option> </select> </div> <input type="submit" class="btn" value="提 交" /> </form> </div> <!--<p id="stat"><script type="text/javascript" src="http://js.tongji.linezing.com/1870888/tongji.js"></script></p>--> </body> </html>
1.使用了1.9以上版本的jQuery时,jquery.multiselect2side.js会在执行时报如下错误:
jquery.multiselect2side.js:106 Uncaught TypeError: Cannot read property 'msie' of undefined。
所以必须加上jquery-migrate-1.2.1.min.js,它负责1.9以上版本jQuery的兼容问题。
2.查看页面源码会发现,右侧select的name等于左侧select的name加上ms2side__dx[],这个后缀是自动加的。