javascrpit 控制两个多选筐数据变迁

最新推荐文章于 2025-02-15 19:47:00 发布

原创最新推荐文章于 2025-02-15 19:47:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #button #function #input #insert #stylesheet

该博客展示了菜单快捷组定义的前端实现代码。包含多个 JavaScript 函数，用于插入、删除、全选、调整顺序等操作，还涉及样式表引入。通过 HTML 表格和下拉框呈现界面，用户可对菜单快捷组项目进行管理，最后可保存或重置设置。

<html>
<head>
<title>菜单快捷组</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

     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;
     option_value=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++;
}

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++)
   {
      options_value=select1.options(i).value;
      fld_str+=options_value+",";
    }

location="submit.php?FLD_STR=" + fld_str;
}
</script>
</head>

<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>

<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=" ↑ " onClick="func_up();">
      <br><br>
      <input type="button" class="SmallInput" value=" ↓ " onClick="func_down();">
    </td>
    <td valign="top" align="center" bgcolor="#CCCCCC">
    <select name="select1" ondblclick="func_delete();" MULTIPLE style="width:200;height:280">
    </select>
    <input type="button" value=" 全选 " onClick="func_select_all1();" class="SmallInput">
    </td>

    <td align="center" valign="top" bgcolor="#CCCCCC">
    <select name="select2" ondblclick="func_insert();" MULTIPLE style="width:250;height:280">
       <option value="3">内部电脑短信</option>
       <option value="41">手机短信息</option>
       <option value="4">公告通知</option>
       <option value="8">日程安排</option>
       <option value="9">工作日志</option>
       <option value="11">个人设置</option>
       <option value="1001">进入流程</option>
       <option value="1012">内部邮件</option>
       <option value="1013">Internet 邮件</option>
       <option value="1053">教育培训中心</option>
       <option value="1018">人事</option>
       <option value="1021">行政</option>
       <option value="1022">总务</option>
       <option value="1054">精彩生活</option>
       <option value="1045">员工心声</option>
       <option value="115">图片欣赏</option>
       <option value="63">全通论坛</option>
       <option value="1056">金税技术专区</option>
       <option value="76">网络硬盘</option>
       <option value="1036">网站监控</option>
       <option value="1004">网管文件</option>
       <option value="1003">三部文件</option>
       <option value="1029">员工意见箱</option>
       <option value="1032">新进人员须知</option>
       <option value="1010">员工通讯录</option>
       <option value="1011">excle表格</option>
       <option value="1052">公司架构图</option>
       <option value="1005">单位信息查询</option>
       <option value="1006">部门信息查询</option>
       <option value="1028">诚聘</option>
       <option value="21">电话区号查询</option>
       <option value="22">邮政编码查询</option>
       <option value="82">万年历</option>
       <option value="83">世界时间</option>
    </select>
    <input type="button" value=" 全选 " onClick="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="保存" onClick="mysubmit();">    
      <input type="button" class="BigButton" value="重置" onClick="location='index.php'">
    </td>
</tr>

</table>

</body>
</html>