JS可升降序多选框例子

最新推荐文章于 2022-12-21 09:14:22 发布

zym820910

最新推荐文章于 2022-12-21 09:14:22 发布

阅读量136

点赞数

分类专栏： JavaScript 文章标签：项目管理公告工作 CSS PHP

本文链接：https://blog.csdn.net/zym820910/article/details/83698224

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>菜单快捷组</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
function func_insert()
{
for (i=0; i<select2.options.length; i++)
{
if(select2.options(i).selected)
{
    option_text=select2.options(i).text;
    optionvalue=select2.options(i).value;
    option_style_color=select2.options(i).style.color;
    var my_option = document.createElement("OPTION");
    my_option.text=option_text;
    my_option.value=option_value;
    my_option.style.color=option_style_color;
    pos=select2.options.length;
    select1.add(my_option,pos);
    select2.remove(i);
    i--;
}
}//for
}
function func_delete()
{
for (i=0;i<select1.options.length;i++)
{
if(select1.options(i).selected)
{
    option_text=select1.options(i).text;
    optionvalue=select1.options(i).value;
    var my_option = document.createElement("OPTION");
    my_option.text=option_text;
    my_option.value=option_value;
    pos=select2.options.length;
    select2.add(my_option,pos);
    select1.remove(i);
    i--;
}
}//for
}
function func_select_all1()
{
for (i=select1.options.length-1; i>=0; i--)
select1.options(i).selected=true;
}
function func_select_all2()
{
for (i=select2.options.length-1; i>=0; i--)
select2.options(i).selected=true;
}
function func_up()
{
sel_count=0;
for (i=select1.options.length-1; i>=0; i--)
{
    if(select1.options(i).selected)
      sel_count++;
}
if(sel_count==0)
{
    alert("调整菜单快捷组的项目顺序时，请选择其中一项！");
    return;
}
else if(sel_count>1)
{
    alert("调整菜单快捷组的项目顺序时，只能选择其中一项！");
    return;
}
i=select1.selectedIndex;
if(i!=0)
{
    var my_option = document.createElement("OPTION");
    my_option.text=select1.options(i).text;
    my_option.value=select1.options(i).value;
    select1.add(my_option,i-1);
    select1.remove(i+1);
    select1.options(i-1).selected=true;
}
}
function func_down()
{
sel_count=0;
for (i=select1.options.length-1; i>=0; i--)
{
    if(select1.options(i).selected)
      sel_count++;
}
if(sel_count==0)
{
    alert("调整菜单快捷组的项目顺序时，请选择其中一项！");
    return;
}
else if(sel_count>1)
{
    alert("调整菜单快捷组的项目顺序时，只能选择其中一项！");
    return;
}
i=select1.selectedIndex;
if(i!=select1.options.length-1)
{
    var my_option = document.createElement("OPTION");
    my_option.text=select1.options(i).text;
    my_option.value=select1.options(i).value;
    select1.add(my_option,i+2);
    select1.remove(i);
    select1.options(i+1).selected=true;
}
}
function mysubmit()
{
fld_str="";
for (i=0; i< select1.options.length; i++)
{
      optionsvalue=select1.options(i).value;
      fld_str+=options_value+",";
    }
location="submit.php?FLD_STR=" + fld_str;
}
</script>
</head>
<body class="bodycolor" topmargin="5">

<table border="0" width="100%" cellspacing="0" cellpadding="3" class="small">
<tr>
    <td class="Big"><img src="/images/edit.gif" WIDTH="22" HEIGHT="20" align="absmiddle"><span class="big3"> 菜单快捷组定义</span>
    </td>
</tr>
</table>
<br>
<table width="500" border="1" cellspacing="0" cellpadding="3" align="center" bordercolorlight="#000000" bordercolordark="#FFFFFF" class="big">
<tr bgcolor="#CCCCCC">
    <td align="center">排序</td>
    <td align="center"><b>菜单快捷组项目</b></td>
    <td align="center">选择</td>
    <td align="center" valign="top"><b>备选菜单项</b></td>
</tr>
<tr>
    <td align="center" bgcolor="#999999">
      <input type="button" class="SmallInput" value=" ↑ " οnclick="func_up();">
      <br><br>
      <input type="button" class="SmallInput" value=" ↓ " οnclick="func_down();">
    </td>
    <td valign="top" align="center" bgcolor="#CCCCCC">
    <select name="select1" οndblclick="func_delete();" MULTIPLE style="width:200;height:280">
    </select>
    <input type="button" value=" 全选 " οnclick="func_select_all1();" class="SmallInput">
    </td>
    <td align="center" bgcolor="#999999">
      <input type="button" class="SmallInput" value=" ← " οnclick="func_insert();">
      <br><br>
      <input type="button" class="SmallInput" value=" → " οnclick="func_delete();">
    </td>
    <td align="center" valign="top" bgcolor="#CCCCCC">
    <select name="select2" οndblclick="func_insert();" MULTIPLE style="width:250;height:280">
      <option value="1">内部邮件</option>
      <option value="2">Internet 邮件</option>
      <option value="3">内部短信</option>
      <option value="42">手机短信</option>
      <option value="4">公告通知</option>
      <option value="147">新闻</option>
      <option value="148">投票</option>
      <option value="7">个人考勤</option>
      <option value="8">日程安排</option>
      <option value="9">工作日志</option>
      <option value="10">通讯簿</option>
      <option value="16">个人文件柜</option>
      <option value="11">控制面板</option>
      <option value="130">新建工作</option>
      <option value="5">待办工作</option>
      <option value="131">工作查询</option>
      <option value="132">工作监控</option>
      <option value="24">公告通知管理</option>
      <option value="105">新闻管理</option>
      <option value="119">投票管理</option>
      <option value="80">日程安排查询</option>
      <option value="81">工作日志查询</option>
      <option value="97">工作计划查询</option>
      <option value="98">工作计划管理</option>
      <option value="114">工作计划类型设置</option>
      <option value="127">办公用品信息管理</option>
      <option value="128">办公用品登记管理</option>
      <option value="109">参数设置</option>
      <option value="110">固定资产管理</option>
      <option value="111">固定资产折旧</option>
      <option value="112">固定资产查询</option>
      <option value="52">图书类别定义</option>
      <option value="53">图书信息录入管理</option>
      <option value="54">图书查询</option>
      <option value="86">会议申请</option>
      <option value="87">会议查询</option>
      <option value="88">会议管理</option>
      <option value="89">会议室设置</option>
      <option value="137">管理员设置</option>
      <option value="138">会议纪要</option>
      <option value="91">车辆使用申请</option>
      <option value="92">车辆使用查询</option>
      <option value="93">车辆使用管理</option>
      <option value="94">车辆维护管理</option>
      <option value="95">车辆信息管理</option>
      <option value="118">调度人员管理</option>
      <option value="106">公共通讯簿</option>
      <option value="17">单位信息查询</option>
      <option value="18">部门信息查询</option>
      <option value="19">用户信息查询</option>
      <option value="62">内部讨论区</option>
      <option value="63">超级论坛</option>
      <option value="25">文本网络会议管理</option>
      <option value="48">文本网络会议</option>
      <option value="47">互动会议</option>
      <option value="49">文本聊天室</option>
      <option value="50">语音聊天室</option>
      <option value="15">公共文件柜</option>
      <option value="76">网络硬盘</option>
      <option value="115">图片浏览</option>
      <option value="60">人事档案管理</option>
      <option value="61">人事档案查询</option>
      <option value="120">统计分析</option>
      <option value="149">字段信息定义</option>
      <option value="26">考勤管理</option>
      <option value="29">工资流程管理</option>
      <option value="28">财务工资录入</option>
      <option value="129">部门工资上报</option>
      <option value="123">考核项目设定</option>
      <option value="124">考核任务管理</option>
      <option value="125">进行考核</option>
      <option value="64">客户基本信息管理</option>
      <option value="65">联系人信息管理</option>
      <option value="66">客户服务管理</option>
      <option value="70">综合查询</option>
      <option value="68">产品信息管理</option>
      <option value="71">销售合同管理</option>
      <option value="69">销售记录管理</option>
      <option value="143">综合查询</option>
      <option value="73">供应商信息管理</option>
      <option value="74">供应联系人管理</option>
      <option value="142">客户统计</option>
      <option value="144">客户服务统计</option>
      <option value="145">销售统计</option>
      <option value="140">销售主管指派</option>
      <option value="141">字段信息定义</option>
      <option value="30">单位管理</option>
      <option value="31">部门管理</option>
      <option value="33">用户管理</option>
      <option value="32">角色与权限管理</option>
      <option value="37">设计表单</option>
      <option value="135">设计流程</option>
      <option value="136">流程分类</option>
      <option value="39">考勤设置</option>
      <option value="103">公共网址设置</option>
      <option value="146">工作日志设置</option>
      <option value="107">公共通讯簿设置</option>
      <option value="34">内部讨论区设置</option>
      <option value="35">文本聊天室设置</option>
      <option value="36">公共文件柜设置</option>
      <option value="77">网络硬盘设置</option>
      <option value="116">图片浏览设置</option>
      <option value="6">手机短信设置</option>
      <option value="78">界面设置</option>
      <option value="104">菜单设置</option>
      <option value="121">系统代码设置</option>
      <option value="84">数据库管理</option>
      <option value="99">系统日志管理</option>
      <option value="100">系统资源管理</option>
      <option value="101">系统访问控制</option>
      <option value="113">系统安全设置</option>
      <option value="38">系统信息</option>
      <option value="21">电话区号查询</option>
      <option value="22">邮政编码查询</option>
      <option value="20">列车时刻查询</option>
      <option value="79">公交线路查询</option>
      <option value="23">法律法规查询</option>
      <option value="45">游戏</option>
      <option value="82">万年历</option>
      <option value="83">世界时间</option>
    </select>
    <input type="button" value=" 全选 " οnclick="func_select_all2();" class="SmallInput">
    </td>
</tr>
<tr bgcolor="#CCCCCC">
    <td align="center" valign="top" colspan="4">
    点击条目时，可以组合CTRL或SHIFT键进行多选<br>
      <input type="button" class="BigButton" value="保存" οnclick="mysubmit();">    
      <input type="button" class="BigButton" value="重置" οnclick="location='index.php'">
    </td>
</tr>
</table>
</body>
</html>

zym820910

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS可升降序多选框例子

&lt;link rel="stylesheet" type="text/css" href="/theme/1/style.css"&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;菜单快捷组&lt;/title&gt;&lt;meta http-equiv="Content-Type" content=
复制链接

扫一扫