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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
vue实现几秒后跳转新页面代码
Sep 09 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
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
融入意大利的咖啡文化
2021/03/03 咖啡文化
php结合飞信 免费天气预报短信
2009/05/07 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
php数组键值用法实例分析
2015/02/27 PHP
php字符串函数学习之substr()
2015/03/27 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
js中的闭包实例展示
2018/11/01 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
python实现调用其他python脚本的方法
2014/10/05 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
python中的协程深入理解
2019/06/10 Python
python如何实时获取tcpdump输出
2020/09/16 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
部门年终奖分配方案
2014/05/07 职场文书
教师演讲稿大全
2014/05/16 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js