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 array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 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 Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
php时间计算相关问题小结
2016/05/09 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
详解Python3定时器任务代码
2019/09/23 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
优秀士兵先进事迹
2014/02/06 职场文书
小学二年级评语
2014/04/21 职场文书
员工保密协议书
2014/09/27 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android