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 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 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
mysql 搜索之简单应用
2007/04/27 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
destoon常用的安全设置概述
2014/06/21 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
Java中final关键字详解
2015/08/10 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
九种js弹出对话框的方法总结
2013/03/12 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
Python MD5文件生成码
2009/01/12 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
浅谈Python中的私有变量
2018/02/28 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
手写一个python迭代器过程详解
2019/08/27 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
python实现堆排序的实例讲解
2020/02/21 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
大二法英学生职业生涯规划范文
2014/02/27 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
小学毕业寄语大全
2014/04/03 职场文书
社区维稳工作方案
2014/06/06 职场文书
新农村建设汇报材料
2014/08/15 职场文书
报效祖国演讲稿
2014/09/15 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
格林童话读书笔记
2015/06/30 职场文书