<!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. BAT批处理知识 及 常用批处理

    1.常用DOS命令:https://blog.csdn.net/qq_38676810/article/details/79584531  或  https://www.jb51.net/articl ...

  2. 学 Win32 汇编[22] - 逻辑运算指令: AND、OR、XOR、NOT、TEST

    AND: 逻辑与 ;该指令会置 CF=OF=; 其结果影响 SF.ZF.PF ;指令格式: AND r/m, r/m/i ; Test22_1.asm - 使用 AND 运算将一个数的第二.四位清零 ...

  3. npm install 超时 国内 切换源; npm ERR! code ELIFECYCLE;

    install 超时 查看npm源地址 npm config get registry #http://registry.npmjs.org 为国外镜像地址 设置阿里云镜像 npm config se ...

  4. 装nginx遇到的坑 未完待续

    首装nginx时 server { listen 8066;  监听端口号 server_name localhost;   监听地址 location / goldwind{   root /roo ...

  5. delphi基础篇之数据类型之三：3.结构类型（Struct）

    3.结构类型(Struct) 结构类型在内存中存储一组相关的数据项,而不是像简单数据类型那样单一的数值.结构数据类型包括:集合类型.数组类型.记录类型.文件类型.类类型.类引用类型和接口类型等.

  6. 如何从ST官网下载STM32标准库

    Frm:https://blog.csdn.net/k1ang/article/details/79645044

  7. 获取hdfs集群信息(fs.defaultFS)

    [root@hive-dp-7bd6fd4d55-wctjn hive-1.1.0-cdh5.14.0]# hdfs getconf -confKey fs.default.name19/12/04 ...

  8. ATM+购物车结构

    ATM+购物车 1.需求分析 2.程序设计及目录设计 3.编写程序 4.调试程序

  9. [未解决]报错:SSLError

    参考网友解决的方法 任何报SSLError类的错,解决方法: 引入ssl模块 import ssl 在url链接代码上方添加语句: ssl._create_default_https_context ...

  10. 第一周任务Largest Submatrix of All 1’s

    Largest Submatrix of All 1’s Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 9512   Ac ...