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 相关文章推荐
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
Javascript 数组排序详解
Oct 22 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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.MVC的模板标签系统(五)
2006/09/05 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
浅析javascript的return语句
2015/12/15 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
Python实现的双色球生成功能示例
2017/12/18 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
python安装scipy的步骤解析
2019/09/28 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
python 字典访问的三种方法小结
2019/12/05 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
田径运动会开幕式及主持词
2014/03/28 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
社会实践评语
2014/04/28 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
观后感的写法
2015/06/19 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书