multiselect2side：jQuery多选列表框插件

最新推荐文章于 2024-11-04 16:08:47 发布

weixin_34345753

最新推荐文章于 2024-11-04 16:08:47 发布

阅读量221

点赞数

文章标签： xhtml php javascript ViewUI

本文介绍了一个基于jQuery的插件，用于操作多选列表框。该插件支持将选项从待选区移动到已选区，并自动调整name属性。文中还提到了在使用1.9以上版本的jQuery时，需要引入jquery-migrate-1.2.1.min.js来解决兼容性问题。

摘要由CSDN通过智能技术生成

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[]，这个后缀是自动加的。