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获取当前ip的代码
May 10 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
js实现自定义进度条效果
Mar 15 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
js canvas实现俄罗斯方块
Oct 11 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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字符串分割函数explode的实例代码
2013/02/07 PHP
php blowfish加密解密算法
2016/07/02 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
python3访问字典里的值实例方法
2020/11/18 Python
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
经理秘书岗位职责
2013/11/14 职场文书
采购部主管岗位职责
2014/01/01 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
社区先进事迹材料
2014/05/19 职场文书
社区文艺活动方案
2014/08/19 职场文书
重点工程汇报材料
2014/08/27 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
节约用电通知
2015/04/25 职场文书
党小组评议意见
2015/06/02 职场文书