<!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. phpmyadmin利用的多种方式

    关于phpmyadmin的利用方式大佬们已经总结的很好了,这里只是造轮子(便于记录学习) 确认版本 渗透测试信息搜集永远是首位(也是最重要的一步).     默认目录/doc/html/index ...

  2. sublime text3 nodejs控制台输出结果中文乱码

    在sublime text3安装完nodejs的插件后,运行console.log("你好"),发现控制台出现中文乱码,解决办法:Preferences-> Browser ...

  3. 转-C++之手写strcpy

    转自:strcpy函数的实现 知strcpy函数的原型是: char *strcpy(char *dst, const char *src); 实现strcpy函数 解释为什么要返回char * 假如 ...

  4. HCW 19 Team Round (ICPC format) H Houston, Are You There?（极角排序）

    题目链接:http://codeforces.com/gym/102279/problem/H 大致题意: 你在一个定点,你有个长度为R的钩子,有n个东西在其他点处,问你能勾到的东西的数量是多少? 思 ...

  5. ThreeJS模型展示为黑色，模型出不来

    选取gltf格式时,出现模型为黑色,模型出不来 原因: 我们设计部可能是用maya或者3dmax去做:在模型导出时,没有gltf格式:如果maya或者3dmax导出obj然后导进blender,再导出 ...

  6. 牛客OI月赛12-提高组题解

    牛客OI月赛12-提高组 当天晚上被\(loli\)要求去打了某高端oj部分原创的模拟赛,第二天看了牛客的题觉得非常清真,于是就去写了 不难发现现场写出\(260\text{pts}\)并不需要动脑子 ...

  7. git stash封存分支 以及关于开发新功能的处理

    有种情况,我们要修复项目的bug时,但别的分支有修改的代码,要修复的bug可能会影响(所有分支共用一个暂存区).可以单独创建一个bug分支,用于修复和提交bug,在修改前可以先stash封存分支修改的 ...

  8. GP下CalculateField的用法

    以前用过这个类做字段计算,许久不用有些忘却,记录一下使用方式 public static void CalculateField(IFeatureLayer featureLayer,IField f ...

  9. Mac OS X终端的常用操作命令（UNIX指令）

    用了十多年windows,终于换了个高配Mac,俗话说 无论前端还是后端最终还是走向了linux,无论是换了多少台PC最终都会走向Mac.不学习命令行用什么Mac? 干就完了~ pwd 显示现在的文件 ...

  10. String，StringBuffer，StringBuilder

    String是字符串常量:StringBuffer,StringBuilder是字符串变量 StringBuffer是线程安全的且效率低:StringBuilder是线程不安全的故效率高 操作少量字符 ...