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

时间: 2024-08-29 01:10:09

multiselect2side:jQuery多选列表框插件的相关文章

C#列表框、复选列表框、组合框的用法实例

本文实例讲述了C#列表框.复选列表框.组合框的用法.分享给大家供大家参考.具体分析如下: 功能实现效果如下图所示: 实现代码: 1.声明相关变量存储专业.课程设置及相关信息: 代码如下: string gr, msg, xy; string[] spec, cour1, cour2, cour3, cour4, cour5; 2.在Form1类中自定义函数bool checkGR()检查学生信息: 代码如下: private bool checkGR() { bool check = true;

章节十一、8-操作多选列表框

以下演示操作以图中页面为例(图中的页面是本地的网页,小伙伴们如果需要可以加入555191854或者找其他有多选列表的网站进行练习): 多选列表框可以选择后可以按Ctrl然后选择多项或者取消已经选择的选项,上一节中讲到下拉列表框是不可以进行此操作的. 一.多选列表框的标签中会带有“multiple”属性 二.实例演示 1 package basicweb; 2 3 import static org.junit.jupiter.api.Assertions.*; 4 5 import java.u

自定义jQuery浮动弹出框插件

自定义浮动弹出框使用说明 1. jquery.alert.js源代码如下: (function($){ var defaults = { width : 350, //浮动弹出框宽度 height : 200, //浮动弹出框高度 minWidth : 350, //浮动弹出框最小宽度 minHeight : 200, //浮动弹出框最小高度 fontFamily : "微软雅黑",//浮动弹出框内文字字体 fontSize : "12px",//浮动弹出框内文字大

jQuery+css3弹出框插件

先来看DEMO:https://codepen.io/jonechen/pen/regjGG 插件的开发很简单,运用了CSS3的动画效果,并且弹出框的内容可以自定义.插件的默认配置参数有三个: var defaults = { event: 'click', // 默认点击事件 dialogBox: 'selector', // 弹出框容器 hover: false, // 默认滑动事件关闭 } CSS部分: *{padding: 0; margin: 0; list-style: none;f

非常强大的jQuery万能浮动框插件

支持hover, click, focus以及无事件触发:支持多达12种位置的定位,出界自动调整:支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等:可自定义装载容器:内置UI不错的装载容器:支持鼠标跟随等. 一.写插件的缘由 为什么想写此插件,想来想去,归结为一个字:“懒”.不想为明明两个类似的功能分别写代码,本应喝茶看美女的休闲时光晃荡在本可避免的代码上,对于我来讲,就是白白耗费自己的青春.于是,干脆,一鼓作气,把这些类似的功能集合到一起,一个插件搞定,一了百了了.这种感觉

jQuery自定义漂亮的下拉框插件8种效果演示

原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html> <html lang="en" class=

jQuery实现下拉框选择图片的功能

让下拉框中显示图片,并可选择对应图片,让select下拉框不仅可显示文字,还可以显示图片内容.为了更生动些,这里还加入了jQuery动画效果,当展开Select列表的时候,图片渐变显示.使用了一个jQ插件:imageselect.js,使用效果的朋友可以自己下载吧. <!DOCTYPE html> <head> <title>支持图片选择的jQuery列表框插件imageselect.js</title> <script type="text

列表框、分组列表框、标签(label)、分组框(fieldset)、框架(frameset)

列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value="America">美国</option> <option value="China" selected="selected">中国</option> <option value="India

下拉框与列表框

<!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-