<!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. NX二次开发-Block UI C++界面Object Color Picker(对象颜色拾取器)控件的获取(持续补充)

    Object Color Picker(对象颜色拾取器)控件的获取 NX9+VS2012 #include <uf.h> #include <uf_obj.h> UF_init ...

  2. phpstorm使用说明

    1.phpstorm软件可以直接断点调试php代码.具体配置方法参考 http://blog.csdn.net/qq4551091/article/details/55258664 就可以了,不过只要 ...

  3. samba环境部署

    安装samba yum install -y samba samba-client vim /etc/samba/smb.conf (共享一个目录,任何人都可以访问但不能写修改) workgroup ...

  4. Java多态的本质

    今天复习了java多态,感觉收获颇多.多态的实现方式有两种,继承父类和实现接口.本质体现在重写上,不同的类重写时体现出不同的特征.编译时和运行时的不同上.编译时只能调用父类的方法,如果调用了子类独有的 ...

  5. PAT_A1084#Broken Keyboard

    Source: PAT A1084 Broken Keyboard (20 分) Description: On a broken keyboard, some of the keys are wor ...

  6. 38-Ubuntu-用户管理-03-usermod指定用户登录shell

    简记: 所谓shell就是可以输入终端命令的窗口,shell是一个软件. 1.Ubuntu终端shell介绍 summmer@summmer-virtual-machine:~/桌面$ summmer ...

  7. hdu6396 /// fread()快速读入挂

    题目大意: 给定n k 给定主角具有的k种属性 给定n个怪兽具有的k种属性和打死该怪兽后能得到的k种属性对应增幅 求主角最多能打死多少怪兽和最终主角的k种属性 k最大为5 开5个优先队列贪心 快速读入 ...

  8. akka-stream之异常处理

    背景介绍 在项目中使用了akk-stream的source.queue功能,如下: Pair<SourceQueueWithComplete<Integer>, Source< ...

  9. 笔记40 Spring Web Flow——订单流程（构建订单）

    二.订单子流程 在识别完顾客之后,主流程的下一件事情就是确定他们想要什么类型 的披萨.订单子流程就是用于提示用户创建披萨并将其放入订单中 的,如下图所示. showOrder状态位于订单子流程的中心位 ...

  10. pandas-pd.read_csv

    read_csv()接受以下常见参数: 参数 中文名 参数类型 默认参数 参数功能 说明 filepath_or_buffer   various :文件路径.URL.或者 是read()函数返回的对 ...