在网上搜索select排序功能代码, 有一大堆,可真正实现置顶功能的却很少,不是功能没有实现,就是速度奇慢无比,当然也可能是自己搜索能力没有过关,于是想到"求人不如己",自己奋笔直书,写完整的select排序功能,只对IE7.0和Firefox3.0进行测试通过!希望能给需要类似功能同仁提供一些帮助!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Select Demo </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
center
{
font-size:12px;
color:red;
font-weight:bold;
}
select
{
font-size:12px;
color:green;
}
</style>
<BODY>
<span id='feedback'></span>
<form method="post" name="myform">
<table border="0" width="400">
<tr>
<td><CENTER>可选择排序方式</CENTER></td>
<td> </td>
<td><CENTER>已选择排序方式</CENTER></td>
</tr>
<tr>
<td width="40%">
<select multiple name="left" id="left" size="8" style='width:200;'
ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">
<option value="20">测试数据一</option>
<option value="30">测试数据二</option>
<option value="40">测试数据三</option>
<option value="50">测试数据四</option>
<option value="60">测试数据五</option>
<option value="70">测试数据六</option>
<option value="80">测试数据七</option>
<option value="90">测试数据八</option>
</select>
</td>
<td width="20%" align="center">
<input type="button" value=" >> " onclick="moveOption(document.getElementById('left'),document.getElementById('right'))"><br><br>
<input type="button" value=" << " onclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</td>
<td width="40%">
<select multiple name="right" id="right" size="8" style='width:200;'
ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</select>
</td>
</tr>
<tr>
<td colspan="3">
<CENTER>
<INPUT TYPE="button" value="置顶" onclick="moveTop(document.getElementById('right'));">
<INPUT TYPE="button" value="上移" onclick="moveUp(document.getElementById('right'));">
<INPUT TYPE="button" value="下移" onclick="moveDown(document.getElementById('right'));">
<INPUT TYPE="button" value="置底" onclick="moveBottom(document.getElementById('right'));">
</CENTER></td>
</tr>
</table>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
//上移
function moveUp(obj)
{
for(var i=1; i < obj.length; i++)
{//最上面的一个不需要移动，所以直接从i=1开始
if(obj.options[i].selected)
{
if(!obj.options.item(i-1).selected)
{
var selText = obj.options[i].text;
var selValue = obj.options[i].value;
obj.options[i].text = obj.options[i-1].text;
obj.options[i].value = obj.options[i-1].value;
obj.options[i].selected = false;
obj.options[i-1].text = selText;
obj.options[i-1].value = selValue;
obj.options[i-1].selected=true;
}
}
}
}
//下移
function moveDown(obj)
{
for(var i = obj.length -2 ; i >= 0; i--)
{//向下移动，最后一个不需要处理，所以直接从倒数第二个开始
if(obj.options[i].selected)
{
if(!obj.options[i+1].selected)
{
var selText = obj.options[i].text;
var selValue = obj.options[i].value;
obj.options[i].text = obj.options[i+1].text;
obj.options[i].value = obj.options[i+1].value;
obj.options[i].selected = false;
obj.options[i+1].text = selText;
obj.options[i+1].value = selValue;
obj.options[i+1].selected=true;
}
}
}
}
//移动
function moveOption(obj1, obj2)
{
for(var i = obj1.options.length - 1 ; i >= 0 ; i--)
{
if(obj1.options[i].selected)
{
var opt = new Option(obj1.options[i].text,obj1.options[i].value);
opt.selected = true;
obj2.options.add(opt);
obj1.remove(i);
}
}
}
//置顶
function moveTop(obj)
{
var opts = [];
for(var i =obj.options.length -1 ; i >= 0; i--)
{
if(obj.options[i].selected)
{
opts.push(obj.options[i]);
obj.remove(i);
}
}
var index = 0 ;
for(var t = opts.length-1 ; t>=0 ; t--)
{
var opt = new Option(opts[t].text,opts[t].value);
opt.selected = true;
obj.options.add(opt, index++);
}
}
//置底
function moveBottom(obj)
{
var opts = [];
for(var i =obj.options.length -1 ; i >= 0; i--)
{
if(obj.options[i].selected)
{
opts.push(obj.options[i]);
obj.remove(i);
}
}
for(var t = opts.length-1 ; t>=0 ; t--)
{
var opt = new Option(opts[t].text,opts[t].value);
opt.selected = true;
obj.options.add(opt);
}
}
//-->
</SCRIPT>
分享到：
相关推荐
本文将深入探讨“jQuery Select 上移下移”这一主题，它涉及到如何利用jQuery来实现选择框（Select）中选项的上移和下移功能。 一、jQuery Select 基础 在HTML中，`<select>`元素用于创建下拉列表，而`<option>`...
在本文中，我们将深入探讨如何使用 jQuery 来实现 Select 元素中的选项上移、下移、左移和右移功能。这对于需要动态调整选择项顺序的交互式应用非常有用，比如在线表单编辑或者配置工具。让我们逐一解析这个主题。 ...
在本文中，我们将深入探讨如何使用Microsoft Foundation Class (MFC) 库来开发一个功能丰富的桌面文本编辑器，类似于便签应用，具有置顶和置底功能。MFC是Microsoft提供的一套C++类库，它封装了Windows API，使得...
本文实例讲述了js实现Select列表各项上移和下移的方法。分享给大家供大家参考。具体如下： 这里介绍Select列表各项上移和下移的Js代码，可以手功排序，以前我们都见到过的，从事WEB编程的朋友经常会用得到。 运行...
### 存储过程实现 GridView 的上移下移 在数据库应用程序开发中，有时我们需要实现数据项的排序功能，比如在网格视图（GridView）中调整记录的顺序。本篇文章将详细解析如何通过 SQL Server 存储过程来实现 ...
jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码
下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选...
`select2.min.js`是JavaScript文件的最小化版本，用于减少页面加载时间；而`select2.min.css`则是CSS文件的最小化版本，负责样式呈现。这两个文件应当在HTML页面中正确引用，以便Select2库正常工作。 在实际应用中...
综上所述，使用JavaScript模拟`<select>`下拉菜单可以提供更丰富的定制性和交互性，但需要注意的是，这也会增加代码复杂性和维护成本。因此，在选择实现方式时，应根据项目需求和团队技术栈来权衡。
总结起来，`js`加载`select`项是一项基础的前端技术，而`JSelect`则通过JavaScript为`select`元素提供了丰富的自定义样式和交互功能，极大地提升了用户体验。在实际项目中，结合这两者可以构建出既实用又美观的下拉...
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"> ``` 接着，对`<select>`元素应用`class="selectpicker"`，并可自定义其他属性，如`data-live-search=...
### Js操作Select大全知识点详解 #### 一、概述 JavaScript（简称JS）是网页开发中不可或缺的一部分，尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`<select>`...
总结，`select`元素在JavaScript中是不可或缺的一部分，尤其在表单提交和用户交互场景中。通过熟练掌握它的用法和相关事件处理，可以构建更丰富、更具有交互性的网页应用。希望这个详解能帮助你理解和运用`select`...
原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码
- 使用JavaScript来获取页面上所有的select元素。可以通过jQuery的选择器或者原生JavaScript的document.getElementsByTagName("select")方法获取。 - 对于每一个获取到的select元素，创建一个div元素作为它的...
JavaScript可以监听鼠标的移动事件，当鼠标移动到<select>的某个上时，触发显示提示信息的代码。CSS则用于定制提示信息的样式，如颜色、位置、字体等，使其与整体界面风格保持一致。 例如，以下是一个简单的...
js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化
js 操作 select 控件大全是 JavaScript 中对 select 控件的各种操作的集合，包括新增、修改、删除、选中、清空、判断存在等多种操作。下面将对这些操作进行详细的介绍和讲解。 一、 判断 select 选项中是否存在 ...