<!DOCTYPE html>

<html lang="en">

<head>

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<script src="jquery.validate.js"></script>

<!-- 必选先导入jqury包，然后在导入validate包，不然会包jquery未找到错误 -->

<!-- <style>

#select{

  width:150px;

/*  overflow: hidden;

*/

}

</style> -->

<!-- 左边全部给右边 -->

<script type="text/javascript">

$(function(){

 $('button:eq(1)').click(function(event){

 var $str=$('#select1 option');

 $('#select').append($str);

 $('#select1 option:selected').remove();

 return false;//这里要取消按钮的默认事件，否则会出现一闪的情况

  });

});

</script>

<!-- 右边全部给左边 -->

<script type="text/javascript">

$(function(){

 $('button:eq(2)').click(function(event){

 var $str=$('#select option');

 $('#select1').append($str);

 $('#select option:selected').remove();

 return false;//这里要取消按钮的默认事件，否则会出现一闪的情况

  });

});

</script>

<!-- /*右边给左边加*/ -->

</style>

<script type="text/javascript">

$(function(){

 $('button:eq(3)').click(function(event){

 var $str=$('#select option:selected');

 $('#select1').append($str);

 $('#select option:selected').remove();

 return false;//这里要取消按钮的默认事件，否则会出现一闪的情况

  });

});

</script>

</style>

<!-- 左边给右边加 -->

<script type="text/javascript">

$(function(){

 $('button:eq(0)').click(function(event){

 var $str=$('#select1 option:selected');

 $('#select').append($str);

 $('#select1 option:selected').remove();

 return false;//这里要取消按钮的默认事件，否则会出现一闪的情况

  });

});

</script>

<script type="text/javascript">

$(function(){

  $('#demoform').validate({

      rules:{

    username:{

        required:true,

        minlength:2,

        maxlength:10

    },

    password:{

        required:true,

        range:[2,16]

    },

    name:{

        required:true

    }

      },messages:{

      username:{

      required:'*请输入用户名',

        minlength:'最小为2位',

        maxlength:'最多为10位'

    },

    password:{

        required:'*请输入用密码',

        range:'密码范围为2-16位'

    },

    name:{

        required:'*请不要为空'

    }

      }

  });

});

</script>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<form  action='' id='demoform'>

    <label for="username">登录账号:</label>

    <input type="text" name="username" id="username">

    <br>

    <label for="password">登录密码:</label>

    <input type="password" name="password" id="password">

    <br>

    <label for="name">主持人名:</label>

    <input type="text" name="name" id="name">

    <br>

    <label for="pindap">负责频道：</label><br>

<select multiple="multiple" id='select1' size=15 style='width: 100px;height: 250px'>

<option value="美丽人生1" selected="selected">美丽人生1</option>

<option value="美丽人生2">美丽人生2</option>

<option value="美丽人生3">美丽人生3</option>

<option value="美丽人生4">美丽人生4</option>

<option value="美丽人生5">美丽人生5</option>

<option value="美丽人生6">美丽人生6</option>

<option value="美丽人生7">美丽人生7</option>

<option value="美丽人生8">美丽人生8</option>

<option value="美丽人生9">美丽人生9</option>

<option value="美丽人生10">美丽人生10</option>

<option value="美丽人生11">美丽人生11</option>

</select>

<button>>|</button>

<button>>></button>

<button><<</button>

<button>|<</button>

<select multiple="multiple" id='select' size=15 style='width: 100px;height: 250px'>

</select>

<div class="test"></div>

<br>

    <input type="submit" value="提交">

</form>

</body>

</html>

<!-- 第一个问题是： 导包问题jquery包必须要在validate包之前导入，否则报错

第二个问题：加入select中的是文本内容而不是value值，更预想的不一样

第三个问题：没有找到脚本,但是脚本仍在加载中   因为缺少了重新加载的$(function(){});

第四个问题：select并不能设置height，可以通过设置size来改变高度

第五个问题：select不能换行，因为一次性都给value赋值了，没有拆分, 其实不需要获取到具体的value,

只需要获取到选择到的既可

-->

jquery下拉框应用的更多相关文章

  1. jquery 下拉框 收藏

    jquery 下拉框  Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...

  2. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  3. jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）

    jQuery下拉框操作系列$("option:selected",this)  &&(锋利的jQuery) <!DOCTYPE html> <ht ...

  4. Ajax jQuery下拉框联动案例

    需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

  5. jQuery下拉框扩展和美化插件Chosen

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

  6. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  7. jquery 下拉框插件,实现智能补全,模糊搜索,多选

    近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索 ...

  8. jQuery 下拉框输入匹配提示选项

    做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示

  9. Jquery下拉框左右选择

    1.说明 本文demo实现下拉框左右选择,本文地址:http://www.cnblogs.com/lengzhan/p/6423023.html 2.代码 <!DOCTYPE html PUBL ...

  10. 自制Jquery下拉框插件

    (function ($) { $.fn.select3 = function (option) { $(this).each(function () { var _this = $(this); v ...

随机推荐

  1. 剑指offer---2、二叉搜索树的后序遍历序列

    剑指offer---2.二叉搜索树的后序遍历序列 一.总结 一句话总结: 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字 ...

  2. 二叉树总结及部分Lintcode题目分析 1

    1. 遍历问题 Preorder / Inorder / Postorder preorder: root left right inorder: left root right postorder: ...

  3. CSS：CSS 语法

    ylbtech-CSS:CSS 语法 1.返回顶部 1. CSS 语法 实例 查看 实例 1 查看 实例 2 CSS 实例 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是 ...

  4. Openstack 中的消息总线 & AMQP

    目录 目录 消息总线 消息总线的原理 AMQP 消息总线 Openstack 采用了面向服务的开发模式(有别于面向对象和面向过程),需要我们去考虑各个服务之间和各项目之间是如何传递消息的. Restf ...

  5. 校验文件是否是同一个文件，以及mac中使用MD5命令

    背景 sz了war包,因为查看不到里面的内容,并不确定是否是同一个文件. 解决 通过MD5校验 md5sum xxxx 但是在mac中是没有这个命令的下载半天没下载下来,下面是快捷操作. 1.打开终端 ...

  6. pymongo中使用聚合查询

    在使用mongo数据库时,简单的查询基本上可以满足大多数的业务场景,但是试想一下,如果要统计某一荐在指定的数据中出现了多少次该怎么查询呢?笨的方法是使用find 将数据查询出来,再使用count() ...

  7. babel/core 6.x升级到7.x要碰到的一些坑

    刚学习react.js没多久,碰到各种坑.就比如这个问题,弄了我3个小时,终于解决了.其实就是一个小问题. 报错信息: Error: Cannot find module '@babel/core' ...

  8. UI自动化ADB出现devices offline的解决方法

    终端运行如下命令即可解决: adb kill-server adb start-server adb remount

  9. 4-Ubuntu-启动/关闭/重启mysql服务

    启动: sudo service mysql start 关闭: sudo service mysql stop 重启: sudo service mysql restart

  10. zabbix--监控的组件和进程介绍

    上图是zabbix的架构,zabbix proxy(代理),可以减小IO并发. zabbix web GUI是用php写的画图工具,从数据库抓取数据. zabbix database zabbix获取 ...