实现option上下移动_JS实现Select的option上下移动的方法

本文实例讲述了JS实现Select的option上下移动的方法。分享给大家供大家参考，具体如下：

function UpOrDown(direct, selectId) {//direct : 1:Up, -1:Down

var obj = document.getElementById(selectId);

var len = obj.length;

var index = obj.selectedIndex;

//如果：1.没有选中的项; 2.向上，但已是最上; 3.向下，但是最下，不作处理

if ( (index == -1) || (direct == -1 && index == 0) || (direct == 1 && index >= len - 1) )

return;

var swapIndex = index + direct;

var tempOptions = new Array();

for (var i = 0; i < len; i++){

tempOptions[tempOptions.length] = obj.options[i == index?swapIndex:(i == swapIndex?index:i)];

}

obj.options.length = 0;

for (var i = 0; i < len; i++)

obj.options.add(tempOptions[i]);

}

function UpOrDown2(direct, selectId) {//direct : 1:Up, 0:Down

var obj = document.getElementById(selectId);

var len = obj.length;

var index = obj.selectedIndex;

//如果：1.没有选中的项; 2.向上，但已是最上; 3.向下，但是最下，不作处理

if( (index == -1) || (direct == 1 && index == 0) || (direct == 0 && index >= len - 1) )

return;

var tempOptions = new Array();

//如是向上，得到自己上一个到最后的option数组；如是向下，得到自己到最后一个的option数组

for (var i = index - direct; i < len; i++)

tempOptions[tempOptions.length] = obj.options[i];

//去除刚才取得的部分

obj.options.length = index - direct;

//颠倒取两个option

obj.options.add(tempOptions[1]);

obj.options.add(tempOptions[0]);

//将余下的option全部加进来

for (var i = 2; i < tempOptions.length; i++)

obj.options.add(tempOptions[i]);

}

希望本文所述对大家JavaScript程序设计有所帮助。

实现option上下移动_JS实现Select的option上下移动的方法相关推荐

实现option上下移动_js: 实现Select的option上下移动 | 学步园
function UpOrDown(direct, selectId) {//direct : 1:Up, -1:Down var obj = document.getElementById(sele ...
js 多选框被选中触发的事件_JS实现select选中option触发事件操作示例
本文实例讲述了JS实现select选中option触发事件操作.分享给大家供大家参考,具体如下: 我们在用到下拉列表框select时,需要对选中的选项触发事件,其实本身没有触发事件方法,我们只有在se ...
完美解决html中select的option不能隐藏的问题。
开发过程中无意遇到这个问题,解决问题第一时间就是百度.结果得到如下方法: 1.首先设置option的display:none的方案肯定是不可行了: 2.某网友提出的两种方案: a.在option标签上 ...
将Select转变为支持输入内容对Select的Option进行筛选的js
/*** 将Select转变为支持输入内容对Select的Option进行筛选的js* var $select = $("select["+TriangleDefinition.H ...
select中option改变时跳转到其他页面
html代码: <div class="friend_link"><select οnchange=mbar(this) name="select&qu ...
关于Angular中使用HTML的select和option标签的一些问题
如果在Angular中使用HTML的select和option标签时,给两个标签分别绑定数据的时候,虽然可以通过[ngModel]和(ngModelChange)的形式绑定数值及选项变化后触发的事件. ...
怎样得到select所有option里的值
问: 一个页面里有个复选select 因为option是动态变化的我想在提交后得到这个select里所有option的value <select multiple name=test> ...
下拉插件 (带搜索) Bootstrap-select 从后台获取数据填充到select的 option中用法详解...
今天收到了客户的需求,要求在新增停车场ID的时候要从数据库查出来对应的停车场名称然后显示在界面上.保存的时候按照停车场ID进行保存. 自己首先把后台的部分写完了,测试了接口数据.成功的拿到了ajax数 ...
select中option解析
select动态添option: var sel=document.getElementById(selectId); //获取select var newOpt=document.c ...

实现option上下移动_JS实现Select的option上下移动的方法

实现option上下移动_JS实现Select的option上下移动的方法相关推荐

最新文章

热门文章