js 控制 select option选项上下移动 jackey

最新推荐文章于 2021-02-12 00:55:39 发布
最新推荐文章于 2021-02-12 00:55:39 发布
阅读量178 收藏
点赞数
分类专栏： js应用 文章标签： PHP UP HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>排序</title>
<script>
var x=null;
var listObj=null;
//鼠标按下不放时的操作
function setTimeStart(type)
{
listObj=document.getElementById('forder');
//超过0.3秒启动连续的向上(下)的操作
if(type=="up")
{
x=setTimeout(upListItem,300);
}else
{
x=setTimeout(downListItem,300);
}
}
//将选中item向上
function upListItem()
{
var selIndex=listObj.selectedIndex;
if(selIndex<0)
{
if(x!=null){clearTimeout(x);}
alert("请先选中一项！");
return;
}
if(selIndex==0)
{
if(x!=null){clearTimeout(x);}
alert("已经移到第一位！");
return;
}var selValue=listObj.options[selIndex].value;
var selText=listObj.options[selIndex].text;
listObj.options[selIndex].value=listObj.options[selIndex-1].value;
listObj.options[selIndex].text=listObj.options[selIndex-1].text;
listObj.options[selIndex-1].value=selValue;
listObj.options[selIndex-1].text=selText;
listObj.selectedIndex=selIndex-1;
if(selIndex+1>0)
{
x=setTimeout(upListItem,200)
}
}
//将选中item向下
function downListItem()
{
var selIndex=listObj.selectedIndex;
if(selIndex<0)
{
if(x!=null){clearTimeout(x);}
alert("请先选中一项！");
return;
}
if(selIndex==listObj.options.length-1)
{
if(x!=null){clearTimeout(x);}
alert("已经移到最后一位！");
return;
}var selValue=listObj.options[selIndex].value;
var selText=listObj.options[selIndex].text;
listObj.options[selIndex].value=listObj.options[selIndex+1].value;
listObj.options[selIndex].text=listObj.options[selIndex+1].text;
listObj.options[selIndex+1].value=selValue;
listObj.options[selIndex+1].text=selText;
listObj.selectedIndex=selIndex+1;
if(selIndex+1<listObj.options.length-1)
{
x=setTimeout(downListItem,200)
}
}
</script>
</head>
<body topMargin="20px" leftMargin="10px" rightMargin="0">
<TABLE id="Table1" height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD vAlign="top">
<TABLE id="Table4" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD><INPUT class="upBtn" type="button" value="向上↑" οnmοusedοwn="setTimeStart('up');" οnmοuseup="clearTimeout(x);"
οnclick="listObj=document.getElementById('forder');upListItem();clearTimeout(x);" ID="Button1" NAME="Button1"> <INPUT style="WIDTH: 48px; HEIGHT: 22px" type="button" value="↓向下" class="downBtn" οnmοusedοwn="setTimeStart('down');"
οnmοuseup="clearTimeout(x);" οnclick="listObj=document.getElementById('forder');downListItem();clearTimeout(x);" ID="Button2" NAME="Button2">
</TD>
</TR>
<TR>
<TD>
<SELECT id="forder" style="WIDTH: 304px; HEIGHT: 240px" size="15">
<OPTION value=1>1</OPTION>
<OPTION value=2>2</OPTION>
<OPTION value=3>3</OPTION>
<OPTION value=4>4</OPTION>
<OPTION value=5>5</OPTION>
<OPTION value=6>6</OPTION>
<OPTION value=7>7</OPTION>
<OPTION value=8>8</OPTION>
<OPTION value=9>9</OPTION>
</SELECT></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</body>
</html>
本文来自爱秋天电脑教程网 http://www.loveqiutian.cn, 本文地址：http://www.loveqiutian.cn/bencandy.php?id=61473

qingsf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中select下拉框的用法总结
11-24
本文针对开发项目中遇到的问题，进行了汇总 问题1：如何选择select的option里面的值？ 首先会用到一个方法 onchange（）；这个方法主要用于触发，选择框内容改变时间 实现代码： <!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <select onchange="test(event)"> <option>安静</option> <option>晴天</option> <option>七里香</option> </select> <script typ
js控制select 中option项的上下移动
lanfeng330的专栏
10-18 1267
①select.options("id")方法取出一个option②证明option的索引不能通过option.index来更改其索引值③通过option的swapNode方法来交换索引④选取一个Item通过select的selectIndex来选中一个option如果该Item有id,可以通过id值来选取该Item:  options("hong")  01234function
select以列表的方式显示，并且实现选中的选项上移下移
qq_26702601的博客
10-11 1837
1、为select元素添加multiple=“multiple”属性即可实现select以列表的方式显示（可多选） 2、选中一个或多个option，点击上移按钮实现选中的内容向上移动(selectId 为select元素的id) function optionUp(){ var  selOptions = $("#selectId option:selected"); if(selOpti
实现option上下移动_js控制select 中option项的上下移动
weixin_36480510的博客
02-12 110
①select.options("id")方法取出一个option②证明option的索引不能通过option.index来更改其索引值③通过option的swapNode方法来交换索引④选取一个Item通过select的selectIndex来选中一个option如果该Item有id,可以通过id值来选取该Item: options("hong")01234function setOrder(f...
javascript js 可上、下移动下拉列表选项
weixin_30892763的博客
07-21 159
兼容FireFox、IE，可以上、下、顶部、底部移动的select option的js； 原理： 置顶：主要是交换当前选择索引的option和当前选择索引上面的option的text、value；将这些option向下移动一个索引，最后将选择的索引的text、value赋值给第0个option即可； 向上移动：向上移动就是将当前选择的索引和当前索引-1也就是当前选择的上面一个的option的...
随便写的代码-jacky
08-22
jacky代码，随便下载
jacky:刺客文件（只读）
06-05
找 X 游戏说明： 一个算术游戏，显示一个随机方程，用户将找到缺失值。 只要计时器不为0，用户就可以选择答案。当用户选择正确/错误答案时，计时器也会递增/递减。 当用户连续回答 3 个正确答案时，将给予一枚...
美化select控件Jquery chosen
05-22
在网页开发中，选择框（`<select>`）是一个常用元素，用于用户在预设的选项中进行选择。然而，原生的`<select>`控件样式通常较为朴素，不符合现代网页设计的需求。"美化select控件Jquery chosen"正是为了解决这一...
goneriding:游乐设施、路线和灵感。 由 Jacky Lee 出版
05-31
本地开发 ... 复制并替换src/templates/ride.js的uniqueAuthorizationCode变量，第 41 行。 fetchToken ( ) { //... let uniqueAuthorizationCode = 'c5141474b2c2f0bcaed94be1f28a8e0c6d574071' //...
jacky_dai的博客文章.pdf
08-27
在Jacky_dai的这篇博客文章中，涵盖了多个C++编程和Windows开发的相关知识点，包括标准模板库(STL)的List、内联函数与宏定义的对比、宏的巧妙使用、Windows Template Library(WTL)的学习资源、报文传输中的进制转换...
js实现可输入可选择的select下拉框
11-27
本文实例为大家分享了可输入可选择的select下拉框，供大家参考，具体内容如下 1、原理： 1.1将input输入框和select框合并在一起，但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能 动态的加载一个临时的div出现在该input下方，当点击页面中的空白地方，div隐藏。 1.3代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus:registered:"> <meta name="Author" con
JS实现左边的下拉框内容移动到右边下拉框，支持内容上下移动
包子的博客
03-22 1568
JS实现左边的下拉框内容移动到右边下拉框，支持内容上下移动前言1.准备工作2.添加功能3.删除功能4.上移功能5.下移功能 前言 最近开始学JavaScript，发现这个案例在网上写的都不是很清楚，特意在此上传一遍，还是个新手，写的不好的地方请指出。 效果图如下： 接下来是代码。 1.准备工作 编写HTML代码。设计结构与显示样式，具体代码如下： <style> select { ...
【JavaScript】列表（Select）选项（Option）的移动（上下左右）
IT忍者神龟
07-10 746
对《【JavaScript】列表元素上下左右移动：Select和Option的应用》中的方法进行了优化。 1.使用appendChild（）方法优化左右移动函数moveRight（） 2.使用insertBefore（）方法优化上下移动函数moveUp（） 3.修改同时选中多项上下移动不正常的Bug 功能如下： 支持一次选中多项在左右列表中来回移动
JS控制Option实例(增加、删除，上下移动)
mw666999的专栏
07-26 162
[code="java"] 转自：http://blog.csdn.net/kuangmiao1120/archive/2009/11/10/4793887.aspx JS控制Option实例(增加、删除，上下移动) - 绿野飞扬 ...
实现option上下移动_JS实现Select的option上下移动的方法
weixin_39942037的博客
12-22 86
本文实例讲述了JS实现Select的option上下移动的方法。分享给大家供大家参考，具体如下：function UpOrDown(direct, selectId) {//direct : 1:Up, -1:Downvar obj = document.getElementById(selectId);var len = obj.length;var index = obj.selectedIn...
javascript上下鼠标下拉列表
ASdeAK的专栏
11-07 791
 function MoveUp(){    for (i=1; i    {        if (document.forms[0].lstItem.item(i).selected) {           st = document.forms[0].lstItem.item(i-1).value ;          document.forms[0].l
js实现鼠标选择/键选下拉菜单
TSeven37的博客
07-24 1769
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉菜单&lt;/title&gt; &lt;style type="text/css"&gt; body,ul,li{
一个在Select 中拖动的例子
xiexy的专栏
10-22 1285
选项一选项二选项三选项四选项五选项六选项七向上向下var curOption=new Option();function up(obj){if(obj.selectedIndex!=-1) {var obj1=obj.options(obj.selectedIndex);if (obj.selectedIndex>0)obj1.swapNode(obj1.previousSibling);
用jQuery实现<select>选项上下移动
mym43210的专栏
09-24 1865
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'>      $(function() {    $("#btnMoveUp,#btnMoveDown").click(function() {      var $opt = $("#selList option:selected:first");
用usermod命令将jacky锁定
最新发布
05-31
可以使用以下命令将用户jacky锁定： ``` sudo usermod -L jacky ``` 这将会锁定jacky账户，使得该用户无法登录。如果你想解锁该用户，可以使用以下命令： ``` sudo usermod -U jacky ``` 这将会解锁jacky账户，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值