<meta http-equiv="content-type" content="text/html; charset=UTF-8">

 <script type="text/javascript" src="js/jquery-1.7.2.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()"/>

效果图:

下拉框上移、下移、添加、移除demo的更多相关文章

  1. 动态加载下拉框列表并添加onclick事件

    1.  js动态加载元素并设置属性 摘自(http://www.liangshunet.com/ca/201408/336848696.htm) <div id="parent&quo ...

  2. select下拉框之默认选项清空

    最近和小伙伴发现,select默认选项一般是提示信息,怎么才能让当我们点击下拉框时,可选的选项中没有默认的提示信息呢? 思路: 1.当点击下拉框时,让默认提示信息,即下拉框第一个选项移除. 2.当没有 ...

  3. Selenium实战总结(webwiew下拉框定位)

    基于常见的两种下拉框的展示形式: 1.点击弹出下拉框: 2.鼠标移动弹出下拉框(move_to_element) 实例一[鼠标点击弹出的下拉框]: e.g百度首页的设置--高级搜索--时间: 导包: ...

  4. 自定义SWT控件四之其它下拉框

    4.其它下拉框 4.1 添加联动二级多选择框(有添加按钮和删除按钮) package com.view.control.select; import java.util.ArrayList; impo ...

  5. jq select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性

    select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性 $("#IsRecommend").change(function ...

  6. Html下拉框的定义以及JS、Jquary取值、添加和移除

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name=" ...

  7. JavaScript 下拉框 左边添加至右边

    关于如何实现右边下拉框中选项的排序一时没有好的解决方法,等想到了回来补充 <!DOCTYPE html> <html> <head> <meta charse ...

  8. 通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

随机推荐

  1. 项目管理模式——Projects

    Github 新的项目管理模式——Projects Github 新的项目管理模式——Projects Issues Github 中传统的项目管理是使用 issue 和 pull request 进 ...

  2. 使用 Scut 搭建通服架构

    整体通服的架构图如下: 整体思路: 尽量将公共的业务逻辑分拆到单个业务服务器: 公共业务RDB读写分离,提高IO并发量: 角色简要信息.角色战斗信息修改后将ID压入修改队列,简要信息每3分钟通知同步一 ...

  3. AST抽象语法树

    抽象语法树简介 (一)简介 抽象语法树(abstract syntax code,AST)是源代码的抽象语法结构的树状表示,树上的每个节点都表示源代码中的一种结构,这所以说是抽象的,是因为抽象语法树并 ...

  4. BZOJ 1033 杀蚂蚁

    Description 最近,佳佳迷上了一款好玩的小游戏:antbuster.游戏规则非常简单:在一张地图上,左上角是蚂蚁窝,右下角是蛋糕,蚂蚁会源源不断地从窝里爬出来,试图把蛋糕搬回蚂蚁窝.而你的任 ...

  5. Browsing History

    hdu4464:http://acm.hdu.edu.cn/showproblem.php?pid=4464 题意:就是统计n个字符串中每个字符串每个字符对印的Asci,然后输出最大的长度. 题解:水 ...

  6. keil MDK启动文件分析---基于LPC2100系列(其实都是相通的)

    转用MDK有一段时间了,越来越觉得MDK的强大,因为我之前都是用ADS1.2开发产品,所以更能体会到MDK的强大与易用性.MDK编译出来的代码与ADS1.2相比,代码量减少了很多,我的一个工程用ADS ...

  7. Cortex-M0系统滴答定时器Systick详解

    上图是LPC1114系统滴答定时器(SysTick)的结构图.系统滴答定时器位于Cortex-M0内核中,也就是说,不论是LPC1114,还是其他的Cortex-M0内核单片机,都有这个系统定时器.其 ...

  8. Data 语义学(2)

    四."继承"与 Data Member (1). 只有继承没有多态 先来看个例子 #include <iostream> using namespace std; cl ...

  9. Blue Jeans(串)

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10083   Accepted: 4262 Description The ...

  10. Xmanager4使用记录

    想在windows下远程登录到了Linux桌面,但又不想装vnc server,况且根据同学的实践,vnc的桌面在远程和本地都能看得到,这个似乎不太好.   google到xmanager,装了个测试 ...