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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
看了就知道什么是JSON
Dec 09 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 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
使用无限生命期Session的方法
2006/10/09 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
Yii框架form表单用法实例
2014/12/04 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
js单词形式的运算符
2014/05/06 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
python中logging库的使用总结
2017/10/18 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python实现多线程端口扫描
2019/08/31 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
巴西女装购物网站:Eclectic
2018/04/24 全球购物
实习生自我鉴定
2013/12/12 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
学生会主席竞聘书
2014/03/31 职场文书
班组长竞聘书
2014/03/31 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python