jQuery操作Select的Option上下移动及移除添加等等


Posted in Javascript onNovember 18, 2013
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 
/** 
* 向上移动选中的option 
*/ 
function upSelectedOption(){ 
if(null == $('#where').val()){ 
alert('请选择一项'); 
return false; 
} 
//选中的索引,从0开始 
var optionIndex = $('#where').get(0).selectedIndex; 
//如果选中的不在最上面,表示可以移动 
if(optionIndex > 0){ 
$('#where option:selected').insertBefore($('#where option:selected').prev('option')); 
} 
} 
/** 
* 向下移动选中的option 
*/ 
function downSelectedOption(){ 
if(null == $('#where').val()){ 
alert('请选择一项'); 
return false; 
} 
//索引的长度,从1开始 
var optionLength = $('#where')[0].options.length; 
//选中的索引,从0开始 
var optionIndex = $('#where').get(0).selectedIndex; 
//如果选择的不在最下面,表示可以向下 
if(optionIndex < (optionLength-1)){ 
$('#where option:selected').insertAfter($('#where option:selected').next('option')); 
} 
} 
/** 
* 移除选中的option 
*/ 
function removeSelectedOption(){ 
if(null == $('#where').val()){ 
alert('请选择一项'); 
return false; 
} 
$('#where option:selected').remove(); 
} 
/** 
* 获取所有的option值 
*/ 
function getSelectedOption(){ 
//获取Select选择的Text 
var checkText = $('#where').find('option:selected').text(); 
//获取Select选择的Value 
var checkValue = $('#where').val(); 
alert('当前被选中的text=' + checkText + ', value=' + checkValue); 
var ids = ''; 
var options = $('#where')[0].options; 
for(var i=0; i<options.length; i++){ 
ids = ids + '`' + options[i].id; 
} 
alert('当前被选中的编号顺序为' + ids); 
} 
/** 
* 添加option 
*/ 
function addSelectedOption(){ 
//添加在第一个位置 
$('#where').prepend('<option value="hbin" id="where06">Haerbin</option>'); 
//添加在最后一个位置 
$('#where').append('<option value="hlj" id="where07">HeiLongJiang</option>'); 
$('#where').attr('size', 7); 
} 
</script> 
<div id="updown"> 
<select id="where" name="where" size="5"> 
<option value="hk" id="where01">Hong Kong</option> 
<option value="tw" id="where02">Taiwan</option> 
<option value="cn" id="where03">China</option> 
<option value="us" id="where04">United States</option> 
<option value="ca" id="where05">Canada</option> 
</select> 
</div> 
<br/> 
<input type="button" value="上移" onclick="upSelectedOption()"/> 
<input type="button" value="下移" onclick="downSelectedOption()"/> 
<input type="button" value="删除" onclick="removeSelectedOption()"/> 
<input type="button" value="确定" onclick="getSelectedOption()"/> 
<input type="button" value="添加" onclick="addSelectedOption()"/>
Javascript 相关文章推荐
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
jquery事件与绑定事件
Mar 16 Javascript
jquery仿微信聊天界面
May 06 jQuery
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
jQuery客户端分页实例代码
Nov 18 #Javascript
javascript验证身份证完全方法具体实现
Nov 18 #Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 #Javascript
YUI模块开发原理详解
Nov 18 #Javascript
深入领悟JavaScript中的面向对象
Nov 18 #Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 #Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 #Javascript
You might like
谈谈新手如何学习PHP
2006/12/14 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
php算法实例分享
2015/07/14 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
javascript 解析url的search方法
2010/02/09 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
Angular6封装http请求的步骤详解
2018/08/13 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Python日期的加减等操作的示例
2017/08/15 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
wxPython实现列表增删改查功能
2019/11/19 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
医学实习生自我鉴定
2013/12/12 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
财产公证书
2014/04/10 职场文书
python缺失值的解决方法总结
2021/06/09 Python
html5调用摄像头实例代码
2021/06/28 HTML / CSS
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS