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 CSS修改学习第一章 查找位置
Feb 19 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
Vue实现简单分页器
Dec 29 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
js原生map实现的方法总结
Jan 19 Javascript
JS数组方法some、every和find的使用详情
Oct 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 define的第二个参数使用方法
2013/11/04 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
妙用Jquery的val()方法
2012/06/27 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Django自定义分页与bootstrap分页结合
2021/02/22 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
大学生怎样写好自荐信
2014/02/25 职场文书
装修设计师求职信
2014/02/26 职场文书
团代会宣传工作方案
2014/05/08 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
法制宣传口号
2014/06/16 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
罚款通知怎么写
2015/04/22 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python