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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
js获取ajax返回值代码
Apr 30 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
功能完善的小程序日历组件的实现
Mar 31 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实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
js实现tab切换效果
2017/02/16 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
理解python正则表达式
2016/01/15 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
linux安装python修改默认python版本方法
2019/03/31 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
班长自荐书范文
2014/02/11 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
小学大队委竞选口号
2015/12/25 职场文书
2016年母亲节广告语
2016/01/28 职场文书
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技