`

select多选列表上移,下移,移出示例

浏览器HTML 
阅读更多
1.portSelect.html(自己写的) 
 <html>
<head>
<title></title>
<script>

      var fnCheck=function(obj){
          
		 var oSelect=document.getElementById("ports");
         if(obj.checked)
		 {
            oSelect.options[oSelect.options.length]=new Option(obj.value,obj.value);

		 }else{
            removeOption(obj.value);
		 }

	  }

	  var removeOption=function(value){
          var oSelect=document.getElementById("ports");
		  for(var i=0;i<oSelect.options.length;i++)
		  {
			 if(value==oSelect.options[i].value)
			 {
				  oSelect.remove(i);
				  break;
             }
		   }

	  }

      //上移
	  function up()
	  {
        var oSelect=document.getElementById("ports");
		for(var i=0;i<oSelect.options.length;i++)
		{

           if(oSelect.options[i].selected)
		   {
              if(i<=0) return;
　　　　　　　
              if(!oSelect.options[i-1].selected)  
			  {
			   // oSelect.options[i].swapNode(oSelect.options[i-1]); //ff浏览器不支持

			   var tempValue=oSelect.options[i].value;
			   var tempText=oSelect.options[i].text;
			   oSelect.options[i].value=oSelect.options[i-1].value;
			   oSelect.options[i].text=oSelect.options[i-1].text;
               oSelect.options[i].selected=false;

                oSelect.options[i-1].value=tempValue;
				oSelect.options[i-1].text=tempText;
				oSelect.options[i-1].selected=true;

			  }
                  
		   }

		}

	
	  
	  }

      //下移
	  function down()
	  {

        var oSelect=document.getElementById("ports");
		for(var i=oSelect.options.length-1;i>=0;i--)
		{

           if(oSelect.options[i].selected)
		   {
              if(i>=oSelect.options.length-1) return;

              if(!oSelect.options[i+1].selected)
			  {
			    // oSelect.options[i].swapNode(oSelect.options[i+1]); //ff浏览器不支持

				 var tempValue=oSelect.options[i].value;
			     var tempText=oSelect.options[i].text;
			     oSelect.options[i].value=oSelect.options[i+1].value;
			     oSelect.options[i].text=oSelect.options[i+1].text;
                 oSelect.options[i].selected=false;

                 oSelect.options[i+1].value=tempValue;
				 oSelect.options[i+1].text=tempText;
				 oSelect.options[i+1].selected=true;
				

			  }
			      
		   }

		}


	  }

      //移出
	  function remove()
	  {
          var oSelect=document.getElementById("ports");
		  for(var i=0;i<oSelect.options.length;i++)
		  {   
             if(oSelect.options[i].selected)
			 {
                oSelect.remove(i);
                i--;
				
			 }
         
		  }

		 

	  }





	  
</script>
</head>
<body>
   已选端口: <br>
             <select style="width:200px" size="10" id="ports" multiple="multiple"></select>
			 <input type="button" value="上移" onClick="up()">
			 <input type="button" value="下移" onClick="down()">
			 <input type="button" value="移出" onClick="remove()">

   <p>
   待选端口：<br>
             <input type="checkbox" name="portData" value="100" onClick="fnCheck(this)">100
			 <input type="checkbox" name="portData" value="200" onClick="fnCheck(this)">200
             <input type="checkbox" name="portData" value="300" onClick="fnCheck(this)">300
			 <input type="checkbox" name="portData" value="400" onClick="fnCheck(this)">400
			 <input type="checkbox" name="portData" value="500" onClick="fnCheck(this)">500
			 <input type="checkbox" name="portData" value="600" onClick="fnCheck(this)">600
			 <br>
			 <input type="checkbox" name="portData" value="700" onClick="fnCheck(this)">700
			 <input type="checkbox" name="portData" value="800" onClick="fnCheck(this)">800
             <input type="checkbox" name="portData" value="900" onClick="fnCheck(this)">900
			 <input type="checkbox" name="portData" value="901" onClick="fnCheck(this)">901
			 <input type="checkbox" name="portData" value="902" onClick="fnCheck(this)">902
			 <input type="checkbox" name="portData" value="903" onClick="fnCheck(this)">903
</body>
</html>


2.selectDemo.html(别人写的，经典) 

<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>
分享到：
| Xdoclet生成*.hbm.xml映射文件
评论
发表评论

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

相关推荐

    vue-select 多选下拉列表

    vue-select 多选下拉列表，建议用火狐或者谷歌浏览器打开，低版本IE对vue兼容性不好

    select多选下拉列表+模糊查询功能.rar

    select多选下拉列表+模糊查询功能，亲测完整，有ASP和HTML样例，代码完整。 &lt;!DOCTYPE html&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;script src="jquery.min.js"&gt;&lt;/script&gt; ...

    下拉框多选select多选

    在网页设计和开发中，"下拉框多选select多选"是一个常见的功能，它允许用户在下拉菜单中选择多个选项，而不仅仅是一个。在HTML中，`&lt;select&gt;`元素通常用于创建这样的下拉菜单，但默认情况下，`&lt;select&gt;`只支持单选。...

    select多选下拉框美化

    这通常涉及到使用`&lt;ul&gt;`和`&lt;li&gt;`元素来构建列表，每个`&lt;li&gt;`代表一个选项，通过`&lt;input type="checkbox"&gt;`来实现多选功能，再用jQuery处理点击事件和状态更新。 4. **响应式设计**：为了让多选下拉框在不同设备和...

    select多选与美化

    "select多选与美化"这个主题关注的是如何在HTML的下拉列表中实现多选功能，并且兼容各种主流浏览器，包括Firefox、Opera、Chrome、Safari以及IE6到IE9。这通常涉及到JavaScript库，特别是jQuery的使用，以及CSS样式...

    基于layui的select多选解决方案

    在layui的基础上，把select选择框可更改为多选框，并可进行搜索、筛选值。下拉框内容可物理分页配置、自定义搜索模式(远程搜索)。 存在layui时, 同样也能直接使用xmSelect, 不用必须layui.xmSelect 具有多选上限设置...

    原生select实现多选功能

    原生select实现多选功能

    div 模拟 select 多选

    div 模拟 select 多选 实现还有点bug，望大家一起改正。

    element ui select多选组件 重构

    在 `selectCustomer` 文件中，可能包含了重构过程中的示例代码、测试用例、配置文件或相关说明。通过研究这个文件，我们可以深入了解重构的具体实现和细节。 总的来说，Element UI 的 `select` 多选组件重构是一个...

    select 下拉框可以多选

    综上所述，"select下拉框可以多选"涉及到HTML、CSS、JavaScript基础，以及可能的库和插件的使用，还有无障碍性设计。掌握这些知识点能帮助开发者创建功能丰富、用户体验良好的多选下拉框。在压缩包文件中的"select...

    jsp实现多选列表框

    本资源是用js与html控制的代码，用来实现列表框数据可以多选

    jquery+css+div 实现的模拟select多选

    jquery+css+div 实现的模拟select多选 jquery+css+div 实现的模拟select多选

    extjs中的多选列表

    在EXTJS这个强大的JavaScript框架中，虽然原生并未直接提供多选列表（Multi Select List）组件，但开发者可以通过自定义组件或者利用EXTJS现有的组件进行组合来实现这一功能。EXTJS是一个用于构建富客户端Web应用的...

    实现select多选插件

    在本文中，我们将深入探讨如何实现一个`select`多选插件。`select`元素是HTML中的一个基础组件，用于创建下拉菜单供用户选择。然而，原生的`select`元素并不支持多选功能，这使得在需要用户可以选择多个选项的场景下...

    jQuery Select 上移下移

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

    layui多选下拉框样式，整套layui-select-multiple

    "layui-select-multiple"就是Layui专门为多选下拉框设计的一整套样式和功能。 首先，我们来看“layui多选下拉框样式”这一知识点。Layui的多选下拉框在视觉上非常整洁，其设计遵循了扁平化和简洁化的理念，与现代...

    多选列表的demo

    在IT领域，多选列表（Multiple Select List）是一种常见的用户界面元素，用于让用户从一系列选项中选择多个项目。这种交互方式广泛应用于各种软件、网站和应用程序中，为用户提供了一种高效的方式来选择他们感兴趣的...

    select模拟多选下拉

    在网页开发中，"select模拟多选下拉"是一个常见的需求，特别是在需要用户选择多个选项时。传统的HTML `&lt;select&gt;` 元素虽然支持`multiple`属性实现多选，但其样式和交互方式往往不能满足现代网页设计的需求。因此，...

    html多选下拉框 ，CheckBox的Select组件 可多选的下拉框

    在HTML中，创建一个可多选的下拉框通常涉及到`&lt;select&gt;`元素与`&lt;option&gt;`元素的组合，但为了实现多选功能，我们需要使用`&lt;input type="checkbox"&gt;`和自定义的JavaScript或者利用现代浏览器支持的Web组件技术。...

    jsp select 带多选框

    文件名`t.jpg`可能是相关示例的截图，`multi_select`可能是一个包含更多复杂逻辑或定制样式的多选下拉框的示例文件，可能是CSS样式表或者JavaScript脚本。 总之，"jsp select 带多选框"是JSP开发中常见的用户输入...

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