使用jQuery实现option的上移和下移

基本思路:

上移:(1)获取当前选中的元素的索引值

(2)判断当前元素是否为第一个元素

(3)如果是,则不执行上移操作,如果不是,则则调用insertBefore方法插入到他的prev(紧邻的上一个)元素之前

1 var up = function () {
2          var selectedIndex = $("#SelectedAddressIds option:selected").index(); //获取当前选中元素的索引
3          if(selectedIndex >= 1){
4                   // 插入上一个
5                $("#SelectedAddressIds option:selected").insertBefore($("#SelectedAddressIds option:selected").prev(‘option‘));
6          }
7 }

下移:(1)获取所有option元素的索引值

(2)获取当前选中元素的索引值

(3)判断当前选中元素是否为最后一个元素,如果是,则不执行下移,如果不是则调用insertAfter方法插入到他的next(紧邻的下一个)元素的后面。

 1 var down = function () {
 2             // 获取最后一个option的索引值
 3             var optionNum = $("#SelectedAddressIds option").size() - 1;
 4             // 获取当前选中元素的索引值
 5             var selectedIndex = $("#SelectedAddressIds option:selected").index();
 6
 7             if(selectedIndex < 6){
 8                 // 插入下一个
 9                 $("#SelectedAddressIds option:selected").insertAfter($("#SelectedAddressIds option:selected").next(‘option‘));
10             }
11 }
时间: 2024-10-08 05:02:14

使用jQuery实现option的上移和下移的相关文章

jquery实现标签上移、下移、置顶

eg:如在后台的标签列表中,实现上移.下移.置顶功能 思路: 1.先用到的克隆方法.clone(true): 即把当前要移动的项先保存好,备于后用. 2.找到当前标签所对应的相关元素及其相关方法: 如:.prev()当前元素上面的标签 .next()当前元素下面的标签 .after()xxx之后添加方法 .before()xxx之前添加方法 .prepend添加方法 3.实现 具体代码如: var productsLabel = {     //设置置顶     setHot: function

ListView上移 和下移

  有问题 //ListBox选中的项目移动到第1位 Listbox1.Items.Move(ListBox1.ItemIndex,0); //ListView选中的项目移动到第1位 procedure TForm1.Button5Click(Sender: TObject);var    sel:String;begin    with ListView1 do    begin        sel:=Selected.Caption;        Items.Insert(0).capt

元素的上移、下移等排序操作

最近一些项目中,我经常遇到对元素进行排序操作的需求,包括:上移.下移.置顶.置底.那么这些操作如何实现呢? 上移,简言之就是将需要上移的元素和它前面元素交换位置,使用insertBefore(),大致思路为: var dom=需要上移的元素; var domPrev=dom.prev(); dom.insertBefore(domPrev); 下移,类似上移,将需要下移的元素和它后面的元素交换位置,使用insertAfter(),大致思路为: var dom=需要下移的元素; var domNe

Lind.DDD.Domain.ISortBehavor~上移与下移

在进行列表排序时,有个“上移”和“下移”操作,这个一般在内存里完成,然后统一提交到数据库中,对于上移与下移的设计,大叔在LIND.DDD.DOMAIN里有一个ISortBehavor接口,主要是说,如果实体对象支持排序功能,可以实现这个接口,而在扩展库中,将有为本地结果集动态排序(上移和下移)的方法,这个设计类似于ABP项目里的软删除,当然在大叔LIND里也有对删除的逻辑操作. ISortBehavor内容 class Entity { public int ID{ get; set; } }

JavaScript or jQuery 获取option value值 以及文本内容的方法

1.html <div class="form-group"> <label>保险公司</label> <select class="form-control" id="testSelect"> <option value="平安">平安保险</option> <option value="太平洋">太平洋保险</op

关于dataTable上移或下移

//记录上移或下移         private void ReccordData(DataTable dt, string TypeValue,int index)         {             DataRow dr = dt.Rows[index]; //表示要移动的当前行对象             string strValu = dr[0].ToString(); //当前行对象某一例的值(我这里默认是0列) strVal是记录此值             dt.Row

JS实现LI行数据的上移和下移

JavaScript实现的代码,JavaScript排序功能演示,点击按钮实现数据的上移和下称,一共有两组测试效果,上组采用箭头图标控制的方式,更美观,下组是直接使用文字,根据你的需要自行选择.myList为ul的id值,m为0显示文字,m为1显示图片,mO.mT为文字或图片内容. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD

JQuery实现表格行的上移、下移、删除、增加

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getSer

jquery实现table动态添加行、删除行以及行的上移和下移

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <t