`
wyf
  • 浏览: 433392 次
  • 性别: Icon_minigender_1
  • 来自: 唐山
社区版块
存档分类
最新评论

关于js select 上移,下移,置顶,置底

    博客分类：
  • JS
JavaScriptHTML 
阅读更多 

<!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>
 
分享到：
| sql判断表中是否有此字段
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery Select 上移下移

    本文将深入探讨“jQuery Select 上移下移”这一主题，它涉及到如何利用jQuery来实现选择框（Select）中选项的上移和下移功能。 一、jQuery Select 基础 在HTML中，`&lt;select&gt;`元素用于创建下拉列表，而`&lt;option&gt;`...

    jquery 实现的 select 上移、下移、左移、右移功能

    在本文中，我们将深入探讨如何使用 jQuery 来实现 Select 元素中的选项上移、下移、左移和右移功能。这对于需要动态调整选择项顺序的交互式应用非常有用，比如在线表单编辑或者配置工具。让我们逐一解析这个主题。 ...

    MFC 制作文本编辑器 桌面便签 置顶 置底（源代码）

    在本文中，我们将深入探讨如何使用Microsoft Foundation Class (MFC) 库来开发一个功能丰富的桌面文本编辑器，类似于便签应用，具有置顶和置底功能。MFC是Microsoft提供的一套C++类库，它封装了Windows API，使得...

    js实现Select列表各项上移和下移的方法

    本文实例讲述了js实现Select列表各项上移和下移的方法。分享给大家供大家参考。具体如下： 这里介绍Select列表各项上移和下移的Js代码，可以手功排序，以前我们都见到过的，从事WEB编程的朋友经常会用得到。 运行...

    存储过程实现gridview的上移下移.txt

    ### 存储过程实现 GridView 的上移下移 在数据库应用程序开发中，有时我们需要实现数据项的排序功能，比如在网格视图（GridView）中调整记录的顺序。本篇文章将详细解析如何通过 SQL Server 存储过程来实现 ...

    jquery.selectbox.js select下拉菜单美化代码

    jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码

    select2.mim.js and select2.min.css.zip

    `select2.min.js`是JavaScript文件的最小化版本，用于减少页面加载时间；而`select2.min.css`则是CSS文件的最小化版本，负责样式呈现。这两个文件应当在HTML页面中正确引用，以便Select2库正常工作。 在实际应用中...

    JS模拟select下拉菜单

    综上所述，使用JavaScript模拟`&lt;select&gt;`下拉菜单可以提供更丰富的定制性和交互性，但需要注意的是，这也会增加代码复杂性和维护成本。因此，在选择实现方式时，应根据项目需求和团队技术栈来权衡。

    js 加载select 项

    总结起来，`js`加载`select`项是一项基础的前端技术，而`JSelect`则通过JavaScript为`select`元素提供了丰富的自定义样式和交互功能，极大地提升了用户体验。在实际项目中，结合这两者可以构建出既实用又美观的下拉...

    JQ JS javascript 多选 多选下拉框 select bootstrap-select

    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"&gt; ``` 接着，对`&lt;select&gt;`元素应用`class="selectpicker"`，并可自定义其他属性，如`data-live-search=...

    Js操作Select大全(取值、设置选中等等)

    ### Js操作Select大全知识点详解 #### 一、概述 JavaScript（简称JS）是网页开发中不可或缺的一部分，尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`&lt;select&gt;`...

    js之Select用法

    总结，`select`元素在JavaScript中是不可或缺的一部分，尤其在表单提交和用户交互场景中。通过熟练掌握它的用法和相关事件处理，可以构建更丰富、更具有交互性的网页应用。希望这个详解能帮助你理解和运用`select`...

    原生js select下拉选项框给文本框赋值代码

    原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码

    下拉多选插件ySelect.js.rar

    下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选...

    用JavaScript来美化HTML的select标签的下拉列表效果

    - 使用JavaScript来获取页面上所有的select元素。可以通过jQuery的选择器或者原生JavaScript的document.getElementsByTagName("select")方法获取。 - 对于每一个获取到的select元素，创建一个div元素作为它的...

    js select框美化用input文本框模拟select框美化

    js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化

    js操作select控件大全

    js 操作 select 控件大全是 JavaScript 中对 select 控件的各种操作的集合，包括新增、修改、删除、选中、清空、判断存在等多种操作。下面将对这些操作进行详细的介绍和讲解。 一、 判断 select 选项中是否存在 ...

    纯js超酷select下拉框美化插件

    **纯JS超酷Select下拉框美化插件——TastySelect** 在网页设计中，Select下拉框作为数据选择的常见元素，其样式通常由浏览器默认控制，这往往不符合现代网页设计的美观需求。为了解决这个问题，开发者们创造了各种...

Magicbox
Global site tag (gtag.js) - Google Analytics