select 左右选择器!!!

最新推荐文章于 2024-11-24 09:02:45 发布

小律律

最新推荐文章于 2024-11-24 09:02:45 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/huanglin02/article/details/8174220

本文介绍了一个使用HTML和JavaScript实现的双选框列表操作示例，通过简单的脚本实现了从一个选择框向另一个选择框移动选项的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!doctype html> 
<html>
    <head>
        <title>Site Management Centre</title>
        <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
            <scripttype="text/javascript"language="javascript">  
   function moveItem(dest, source)  
   {  
        var dest   = ( typeof dest == "string" ? document.getElementById(dest): dest );  
        var source = ( typeof source  == "string" ? document.getElementById(source) : source );  
    
        if( source.tagName.toLowerCase() != "select" || dest.tagName.toLowerCase() != "select" )  
            return;  
    
        for ( index=source.length - 1; index >= 0; index-- ) {  
            if ( source[index].selected ) {  
                dest.length++;                      
                dest[dest.length-1].id    = source[index].id;  
                dest[dest.length-1].value = source[index].value;  
                dest[dest.length-1].text  = source[index].text;  
                source[index] = null;  
            }  
        }  
    }  
      
</script>  
</head>
<body>
<tablewidth="20%"border="1"cellpadding="0"cellspacing="0"align="center">  
        <tr>  
            <tdwidth="10%">          
                <selectsize="10"multiple="multiple"id="left"ondblclick="moveItem(right,this)"style="width:120px;
 ">  
                    <optionvalue="def7">ListItem1</option>  
                    <optionvalue="abcd6">ListItem2</option>  
                </select>  
            </td>  
            <tdwidth="3%">  
                <inputtype="button"value="
 >> " name="btnRight" onclick="moveItem(right,left)" />                
                <inputtype="button"value="
 << "onclick="moveItem(left,right)"id="btn"name="btnLeft"/>  
            </td>  
            <tdwidth="10%">  
            
                <selectsize="10"multiple="multiple"id="right"ondblclick="moveItem(left,this)"style="width:120px;
 ">  
                </select>  
            </td>  
        </tr>  
    </table>  
    </body>
      
</html>