两个Form 多选列表控件效果

最新推荐文章于 2024-08-01 21:36:51 发布
最新推荐文章于 2024-08-01 21:36:51 发布
阅读量276 收藏
点赞数
分类专栏： Web Road 文章标签： button function input div javascript border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pojo0121/article/details/3434840
版权
 1：多选列表控件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="option, multiple, select, form, " />
        <meta name="description"
            content="很多人对 form 默认的多选列表效果不太满意，因为选中和未选中的项目是在一起的，当选项较多时问题尤为明显，本文介绍的就是将可选项和选中项分开，并且可以通过操作按钮或者双击来移动选项，操作起来非常方便。" />
        <title> Form 多选列表控件效果</title>
    </head>
    <body>
        <br />
        <div id="example">
            <h3 id="example_title">
                多选列表控件效果
            </h3>
            <div id="example_main">
                <!--************************************* 实例代码开始 *************************************-->
                <style type="text/css">
.multipleSelectBoxControl span { /* Labels above select boxes*/
    font-family: arial;
    font-size: 11px;
    font-weight: bold;
}

.multipleSelectBoxControl div select { /* Select box layout */
    font-family: arial;
    height: 100%;
}

.multipleSelectBoxControl input { /* Small butons */
    width: 25px;
}

.multipleSelectBoxControl div {
    float: left;
}

.multipleSelectBoxDiv {
   
}

fieldset {
    width: 500px;
    margin: 10px;
}
</style>
                <script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var fromBoxArray = new Array();
var toBoxArray = new Array();
var selectBoxIndex = 0;
function moveSingleElement()
{
var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^/d]/g,'');
var tmpFromBox;
var tmpToBox;
if(this.tagName.toLowerCase()=='select'){
tmpFromBox = this;
if(tmpFromBox==fromBoxArray[selectBoxIndex])tmpToBox = toBoxArray[selectBoxIndex]; else tmpToBox = fromBoxArray[selectBoxIndex];
}else{
if(this.value.indexOf('>')>=0){
tmpFromBox = fromBoxArray[selectBoxIndex];
tmpToBox = toBoxArray[selectBoxIndex];
}else{
tmpFromBox = toBoxArray[selectBoxIndex];
tmpToBox = fromBoxArray[selectBoxIndex];
}
}
for(var no=0;no<tmpFromBox.options.length;no++){
if(tmpFromBox.options[no].selected){
tmpFromBox.options[no].selected = false;
tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);
for(var no2=no;no2<(tmpFromBox.options.length-1);no2++){
tmpFromBox.options[no2].value = tmpFromBox.options[no2+1].value;
tmpFromBox.options[no2].text = tmpFromBox.options[no2+1].text;
tmpFromBox.options[no2].selected = tmpFromBox.options[no2+1].selected;
}
no = no -1;
tmpFromBox.options.length = tmpFromBox.options.length-1;
}
}
var tmpTextArray = new Array();
for(var no=0;no<tmpFromBox.options.length;no++){
tmpTextArray.push(tmpFromBox.options[no].text + '___' + tmpFromBox.options[no].value);
}
tmpTextArray.sort();
var tmpTextArray2 = new Array();
for(var no=0;no<tmpToBox.options.length;no++){
tmpTextArray2.push(tmpToBox.options[no].text + '___' + tmpToBox.options[no].value);
}
tmpTextArray2.sort();
for(var no=0;no<tmpTextArray.length;no++){
var items = tmpTextArray[no].split('___');
tmpFromBox.options[no] = new Option(items[0],items[1]);
}
for(var no=0;no<tmpTextArray2.length;no++){
var items = tmpTextArray2[no].split('___');
tmpToBox.options[no] = new Option(items[0],items[1]);
}
}
function moveAllElements()
{
var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^/d]/g,'');
var tmpFromBox;
var tmpToBox;
if(this.value.indexOf('>')>=0){
tmpFromBox = fromBoxArray[selectBoxIndex];
tmpToBox = toBoxArray[selectBoxIndex];
}else{
tmpFromBox = toBoxArray[selectBoxIndex];
tmpToBox = fromBoxArray[selectBoxIndex];
}
for(var no=0;no<tmpFromBox.options.length;no++){
tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);
}
tmpFromBox.options.length=0;
}
function createMovableOptions(fromBox,toBox,totalWidth,totalHeight,labelLeft,labelRight)
{
fromObj = document.getElementById(fromBox);
toObj = document.getElementById(toBox);
fromObj.ondblclick = moveSingleElement;
toObj.ondblclick = moveSingleElement;
fromBoxArray.push(fromObj);
toBoxArray.push(toObj);
var parentEl = fromObj.parentNode;
var parentDiv = document.createElement('DIV');
parentDiv.className='multipleSelectBoxControl';
parentDiv.id = 'selectBoxGroup' + selectBoxIndex;
parentDiv.style.width = totalWidth + 'px';
parentDiv.style.height = totalHeight + 'px';
parentEl.insertBefore(parentDiv,fromObj);
var subDiv = document.createElement('DIV');
subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
fromObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
var label = document.createElement('SPAN');
label.innerHTML = labelLeft;
subDiv.appendChild(label);
subDiv.appendChild(fromObj);
subDiv.className = 'multipleSelectBoxDiv';
parentDiv.appendChild(subDiv);
var buttonDiv = document.createElement('DIV');
buttonDiv.style.verticalAlign = 'middle';
buttonDiv.style.paddingTop = (totalHeight/2) - 50 + 'px';
buttonDiv.style.width = '30px';
buttonDiv.style.textAlign = 'center';
parentDiv.appendChild(buttonDiv);
var buttonRight = document.createElement('INPUT');
buttonRight.type='button';
buttonRight.value = '>';
buttonDiv.appendChild(buttonRight);
buttonRight.onclick = moveSingleElement;
var buttonAllRight = document.createElement('INPUT');
buttonAllRight.type='button';
buttonAllRight.value = '>>';
buttonAllRight.onclick = moveAllElements;
buttonDiv.appendChild(buttonAllRight);
var buttonLeft = document.createElement('INPUT');
buttonLeft.style.marginTop='10px';
buttonLeft.type='button';
buttonLeft.value = '<';
buttonLeft.onclick = moveSingleElement;
buttonDiv.appendChild(buttonLeft);
var buttonAllLeft = document.createElement('INPUT');
buttonAllLeft.type='button';
buttonAllLeft.value = '<<';
buttonAllLeft.onclick = moveAllElements;
buttonDiv.appendChild(buttonAllLeft);
var subDiv = document.createElement('DIV');
subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
toObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
var label = document.createElement('SPAN');
label.innerHTML = labelRight;
subDiv.appendChild(label);
subDiv.appendChild(toObj);
parentDiv.appendChild(subDiv);
toObj.style.height = (totalHeight - label.offsetHeight) + 'px';
fromObj.style.height = (totalHeight - label.offsetHeight) + 'px';
selectBoxIndex++;
}
function selectItem()
{

var obj = document.getElementById('toBox');
for(var no=0;no<obj.options.length;no++){
alert(obj.options[no].value);
obj.options[no].selected = true;
}
}
</script>
                <form method="post"  οnsubmit="selectItem()">
                    <select multiple name="fromBox" id="fromBox">
                        <option value="3">
                            中国
                        </option>
                        <option value="4">
                            美国
                        </option>
                        <option value="6">
                            英国
                        </option>
                        <option value="1">
                            法国
                        </option>
                        <option value="5">
                            俄罗斯
                        </option>
                        <option value="2">
                            意大利
                        </option>
                        <option value="12">
                            韩国
                        </option>
                        <option value="13">
                            印度
                        </option>
                        <option value="11">
                            巴西
                        </option>
                    </select>
                    <select multiple name="toBox[]" id="toBox">
                       
                    </select>
                    <input type="button" οnclick="selectItem()" value="输出">
                </form>
                <script type="text/javascript">
                    createMovableOptions("fromBox","toBox",500,300,'可选国家','已选中的国家');
                </script>
                <p>
                    你可以通过点击操作按钮或者直接双击移动选项。
                </p>
                <!--************************************* 实例代码结束 *************************************-->
            </div>
        </div>
        <br />
    </body>
</html>
2：带Checkbox的列表框
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
    <head>
        <title>带Checkbox的列表框 - 51windows.Net</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head>
    <style>
body,td {
    font-size: 12px;
    color: #000000;
}

.checkbox {
    width: 15px;
    height: 15px;
}

.cked {
    margin: 1px;
    padding: 2px;
    width: 100%;
    display: block;
    background-color: highlight;
    color: highlighttext;
}

.nock {
    margin: 1px;
    padding: 2px;
    width: 100%;
    display: block;
}
</style>
    <body>

        <SCRIPT LANGUAGE="JavaScript">
<!--
function HtmlEncode(text){
    return text.replace(/&/g, '&amp').replace(//"/g, '&quot;').replace(/</g, '<').replace(/>/g, '>');
}
function _checkbox(name,str,defv){
    //haiwa@2005-8-17
    //http://www.51windows.net
    var arr=str.split("^");
    var ck="",bc="";
    for(var i=0;i<arr.length;i++){
        var thisarr=arr[i].split("@=");
        if (thisarr[0].length>0){
            var t=(thisarr.length==2)?thisarr[0]:arr[i];
            var v=(thisarr.length==2)?thisarr[1]:arr[i];
            if((","+HtmlEncode(defv).toLowerCase()+",").replace(/ ,/g, ',').indexOf(","+v+",")!=-1){ck=" checked";cls="cked";}
            else{ck="";cls="nock";}
            var thisstr="<label class=/""+cls+"/" for=/"i_"+name+"_"+i+"/" id=/"l_"+name+"_"+i+"/">";
            thisstr+="<input class=/"checkbox/" onpropertychange=/"document.getElementById('l_"+name+"_"+i+"').className=(document.getElementById('i_"+name+"_"+i+"').checked)?'cked':'nock';/" οnclick=/"document.getElementById('l_"+name+"_"+i+"').className=(document.getElementById('i_"+name+"_"+i+"').checked)?'cked':'nock';/" type=/"checkbox/""+ck+" name=/""+name+"/" id=/"i_"+name+"_"+i+"/" value=/""+HtmlEncode(v)+"/" //> ";
            thisstr+=HtmlEncode(t)+"</label>";
            document.write(thisstr);
        }
    }
}
function _getv(o){
    var allvalue="";
    if(typeof(o)=="undefined"){return "";}
    if (typeof(o.length)=="undefined"){
        if(o.checked){return o.value+ ",";}else{return "";}
    }
    for(var i=0;i<o.length;i++){
        if(o[i].checked){
            allvalue +=o[i].value+",";
        }
    }
    return allvalue;
}


//-->
</SCRIPT>
        <form method="post" name="myform" action="?">
            <table border="0" >
                <tr>
                    <td>
                        <div
                            style="width:100px; height:200px; overflow: auto; border: 2px inset #FFFFFF;">
                            <SCRIPT LANGUAGE="JavaScript">
                                _checkbox("city","北京^山东^安徽^重庆^福建^甘肃^广东^广西^贵州^海南^河北^黑龙江","")
                        </SCRIPT>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                       
                        <button οnclick='alert(_getv(document.myform.city));'>
                            alert值
                        </button>
                    </td>
                </tr>
               
            </table>
        </form>
    </body>
</html>
pojo0121
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
c#winform下拉多选自定义控件(带全选)
01-04
我们可以将这两个控件作为私有成员变量添加到类中： ```csharp private ListBox _itemsListBox; private CheckBox _selectAllCheckbox; ``` 接着，我们需要在控件的构造函数中初始化这些成员，并设置它们的布局。...
layDate多款日期时间控件
09-15
这款控件设计简洁、易用，提供了多种样式和模式，满足不同场景下的需求。在本篇文章中，我们将深入探讨layDate的基本使用、主要功能以及如何在实际项目中应用。 一、layDate的基本使用 1. 引入资源：首先，在HTML...
VB 两种列表框样式的实例
06-07
本实例将深入探讨两种不同样式的列表框：单选列表框和多选列表框，并通过实际代码示例来阐述它们的使用方法。 首先，我们来看单选列表框。单选列表框允许用户从列表中选择一个选项，通常适用于需要用户做出单一决策...
windows form 控件
11-24
下面将详细阐述这两个控件的特性和使用方法。 ### 1. `TreeView`控件 `TreeView`控件在Windows Forms中用于显示一个层次化的节点结构，常用来表示文件系统、目录结构或其他具有层次关系的数据。它由一系列`...
微信小程序表单控件【100%纯】
04-02
1. `calendar.js` 和 `calendar-converter.js`：这两个文件可能是日历组件的核心逻辑，用于展示日期选择界面，并可能包含了日期转换功能，便于在不同格式之间进行转换。 2. `Form-Plus.js`：这可能是一个增强型的...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 566
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 152
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 253
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 280
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
RN高级interview
流星雨的博客
07-31 387
RN高级interview
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1953
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
linux命令行下使用的浏览器
没刮胡子的程序员专栏
08-01 17
从命令行浏览网页的原因有很多。 命令行工具通常具有丰富的选项和参数，可以根据用户的需求进行调整和配置。这种灵活性使得命令行在自动化和脚本编写方面非常有用。 对于系统管理员来说，命令行是管理和配置服务器的首选方式。通过命令行，管理员可以快速执行各种任务，例如安装软件包、配置网络、管理用户和权限等。与图形界面相比，命令行通常更高效，特别是在处理大量的重复性任务时。 使用Linux命令行浏览器可以提高工作效率，降低系统资源消耗，提高系统的稳定性。
easyui 点击单元格的时候，获取该行另外一个字段的值
极客栈
07-29 389
通过绑定 DataGrid 的 ​​ 事件，可以轻松地在单击单元格时获取该行的其他字段值。这个方法适用于各种场景，比如在用户点击某个单元格时显示额外的信息、执行特定的操作等。希望这个示例能帮助你更好地理解和应用 EasyUI DataGrid 的事件处理。
angular入门基础教程(四）动态属性与事件
峰会路转的博客
07-29 176
状态的变化导致属性值的变化，这个时候我们就需要用到动态属性，ng中的动态属性用[]包裹即可。
新手vue学习问题汇总（自用）（长期更新）
lapiii的博客
07-28 377
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
easyadmin layui js监听返回结果，进行token验证防止连点
weixin_43652106的博客
07-29 255
easyadmin layui js监听返回结果，进行token验证防止连点
vue3学习day01-vue3的优势、新的脚手架工具create-vue、创建vue3项目、vue3的项目文件内容、插件变化
2301_76648183的博客
07-31 330
（4）index.html 单页入口，提供id为app的挂载点。
Pinia和vueX的区别是什么，刷新数据丢失怎么处理？
最新发布
ggq53219的博客
08-01 318
Pinia和Vuex都是Vue.js生态系统中的状态管理库，它们在设计理念、使用方式、性能以及生态系统支持等方面存在一些差异。以下是对Pinia和Vuex主要区别的详细分析，以及处理数据刷新丢失问题的建议。
Vue实现当前页面刷新的方法总结
m0_62626838的博客
07-29 174
当组件的 key 属性发生改变时，Vue 会视为这是一个新的组件，而不是复用之前的组件。这样就会触发组件的重新渲染，从而实现页面的刷新。1、使用 location.reload() 方法进行页面刷新，这个方法会重新加载当前页面，类似于用户点击浏览器的刷新按钮。（不推荐，会有瞬间空白闪动）4、至于该方法调用的时机在你需要的时候去调用即可，针对大屏可视化页面卡死问题可考虑写到websocket的onmessage方法里面。3、在组件中，通过设置组件的 key 属性来触发组件的重新渲染，从而实现页面的刷新。
elementUI，vue，前端判断时间是否有交集(重合)方法
peepeeman的博客
08-01 248
前端根据24小时制，判断所选时间是否存在重复情况
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值