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 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 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中读写文件实现代码
2011/10/20 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
最经典的商业地产项目广告词
2014/03/13 职场文书
家长学校实施方案
2014/03/15 职场文书
保险公司年会主持词
2014/03/22 职场文书
临床医师个人自我评价
2014/04/06 职场文书
英语专业求职信
2014/07/08 职场文书
计划生育证明格式范本
2014/09/12 职场文书
出国留学英文自荐信
2015/03/25 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书