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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
cssQuery()的下载与使用方法
Jan 12 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
JsDom 编程小结
Aug 09 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
学习PHP session的传递方式
2016/06/15 PHP
PHP strripos函数用法总结
2019/02/11 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
Node爬取大批量文件的方法示例
2019/06/28 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
详解Python中break语句的用法
2015/05/14 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
什么是URL
2015/12/13 面试题
小班评语大全
2014/05/04 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
MySQL读取JSON转换的方式
2022/03/18 MySQL
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL