jquery下拉框应用
<!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下拉框应用的更多相关文章
- jquery 下拉框 收藏
jquery 下拉框 Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...
- 带搜索框的jQuery下拉框插件
由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...
- jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）
jQuery下拉框操作系列$("option:selected",this) &&(锋利的jQuery) <!DOCTYPE html> <ht ...
- Ajax jQuery下拉框联动案例
需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...
- jQuery下拉框扩展和美化插件Chosen
Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...
- jQuery下拉框插件8种效果
jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...
- jquery 下拉框插件,实现智能补全,模糊搜索,多选
近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索 ...
- jQuery 下拉框输入匹配提示选项
做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示
- Jquery下拉框左右选择
1.说明 本文demo实现下拉框左右选择,本文地址:http://www.cnblogs.com/lengzhan/p/6423023.html 2.代码 <!DOCTYPE html PUBL ...
- 自制Jquery下拉框插件
(function ($) { $.fn.select3 = function (option) { $(this).each(function () { var _this = $(this); v ...
随机推荐
- NodeJS+Express+mySQL服务端开发详解
随着NodeJS的发展,现在已经被很多人熟知,NodeJS已经成为了前端开发人员必备的技能.本文不会对NodeJS过多介绍 如果你感兴趣可以访问NodeJS 官网, 维基百科 本文是利用NodeJS+ ...
- nuxt.js 本地开发跨域问题（Access-Control-Allow-Origin）及其解决方案
先运行npm i @gauseen/nuxt-proxy -D 再nuxt.config.js的module.exports 里面添加如下代码 modules:[ '@nuxtjs/axios', / ...
- 用 Windows Live Writer 和 SyntaxHighlighter 插件写高亮代码
博客园内置支持SyntaxHighlighter代码着色,代码着色语法:<pre class='brush:编程语言'>代码</pre>. 需要注意的是:如何你使用Syntax ...
- Wannafly Winter Camp Day8(Div1,onsite) E题 Souls-like Game 线段树 矩阵乘法
目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog @ Problem:传送门 Portal 原题目描述在最下面. 简单的 ...
- CF 1097D - Hello 2019 D题: Makoto and a Blackboard
目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:传送门 Portal 原题目描述在最下面. 给一个数n ...
- 【SQL】事务回滚
事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位.通过事务,SQL Server能将逻辑相关的一组操作绑定在一起,以便服 ...
- 教你一些IDE中比较骚的操作技巧！
本文转自微信公众号「程序员的成长之路」id:cxydczzl IDEA 有个很牛逼的功能,那就是后缀补全(不是自动补全),很多人竟然不知道这个操作,还在手动敲代码. 这个功能可以使用代码补全来模板式地 ...
- 剑指offer——570~n-1中缺失的数字
题目:0~n-1中缺失的数字. 一个长度为n-1的递增排序数组中的所有数字都是唯一的,并且每个数字都在范围0~n-1之内. 在范围0~n-1内的n个数字中有且只有一个数字不在该数组中,请找出这个数字. ...
- vue组件的inheritAttrs属性
vue官网对于inheritAttrs的属性解释:如果你不希望组件的根元素继承特性,你可以在组件的选项中设置 inheritAttrs: false. 可能不是很好理解,我们可以举个例子来验证一下. ...
- Ubuntu18.04 一键升级Python所有第三方包
一.pip是什么 pip 是 Python 包管理工具,该工具提供了对Python 包的查找.下载.安装.卸载的功能. 二.升级pip版本 1.默认Ubuntu自带的pip (pip 9.0.1)是基 ...