`

JS可升降序多选框例子

项目管理公告工作CSSPHP 
阅读更多

<link rel="stylesheet" type="text/css" href="/theme/1/style.css">

<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=" ↑ " 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" bgcolor="#999999">
      <input type="button" class="SmallInput" value=" ← " onclick="func_insert();">
      <br><br>
      <input type="button" class="SmallInput" value=" → " onclick="func_delete();">
    </td>
    <td align="center" valign="top" bgcolor="#CCCCCC">
    <select name="select2" ondblclick="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=" 全 选 " 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();">&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" class="BigButton" value="重 置" onclick="location='index.php'">
    </td>
</tr>
</table>
</body>
</html>

分享到：
| Java软件的安装与更新
评论
发表评论

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

相关推荐

    jquery多选框

    3. `jquery.multiselect.js` 和 `jquery.multiselect.min.js`：这是jQuery MultiSelect插件的核心JavaScript文件，它们包含了实现多选框增强功能的代码。未压缩版本便于调试，而压缩版本则用于生产环境以减少加载...

    javascript统计，判断多选框checkbox数量,

    在JavaScript编程中，多选框（checkbox）是网页表单中常见的一种元素，常用于让用户选择多个选项。本文将深入探讨如何使用JavaScript来统计多选框的数量，并根据用户的选择重新组织新的数据。 首先，让我们理解多选...

    javascript下拉多选框复选框

    在JavaScript编程中，下拉多选框和复选框是常见的用户交互元素，它们用于收集用户的多选项选择信息。在本项目中，我们探讨的是如何使用纯JavaScript实现一个功能丰富的下拉多选框，而不是依赖于像jQuery这样的库，...

    JS全选反选父项子项联动多选框

    ### JS全选反选父项子项联动多选框知识点详解 #### 一、知识点概述 在前端开发中，我们经常遇到需要实现全选/反选功能的需求，尤其是在表格或列表选择场景中。本文将详细介绍一种实现“父项选中时，子项随父项选中...

    js控制多选框

    实现动态多选交互,单击全选触发选中或者取消选中的事件。

    带复选框JS树，JS带复选框的列表，很好用

    在构建"带复选框的JS树"时，开发者通常会利用JavaScript来实现树的展开/折叠、复选框状态的同步以及与其他组件的交互等功能。 为了实现这个功能，开发者通常会使用现有的JavaScript库，如jQuery、Angular、React等...

    JQUERY组件 多选框

    2. 引入组件：接着，将jQuery多选框组件的JavaScript和CSS文件引入到页面中。 ```html &lt;script src="selectarea.js"&gt; ``` 3. HTML结构：创建一个容器元素，用于放置多选框组件。 ```html &lt;div id="selectArea"&gt;&lt;/...

    js页面中添加 ---左右添加多选框

    在JavaScript页面开发中，"左右添加多选框"通常指的是创建一种交互式用户界面，其中包含可以被用户选中或取消选中的复选框，并且这些复选框以某种方式排列，例如从左到右或者分列显示。这种布局常见于需要用户进行多...

    多选框的处理操作JS

    实现两个多选框之间的移动数据操作实现两个多选框之间的移动数据操作实现两个多选框之间的移动数据操作

    jquery多选框实现单选效果

    要实现将多选框模拟成单选的效果，我们需要确保当用户点击某个多选框时，该多选框被选中而其他所有同组内的多选框都被取消选中。下面是对这个逻辑的具体解析： 1. **初始化状态**：首先，所有的多选框默认都不被...

    11款下拉式多选框

    4. **多选下拉框（JS + DIV）**：这是一种纯JavaScript和HTML实现的下拉多选框，不依赖于特定的库如jQuery。它可能通过动态创建DOM元素来构建下拉菜单，提供自定义事件处理和交互效果。 5. **dhtmlxTree**：虽然...

    带有多选框的菜单

    在IT领域，尤其是在Web开发中，菜单是一...总之，"带有多选框的树形菜单"是提高用户交互性和效率的有效工具，jstree这样的库提供了强大且灵活的实现方式。理解并熟练运用这些技术，将有助于构建更加用户友好的Web应用。

    spreadjs_导出 Excel 显示复选框而不是布尔值-demo.zip

    标题“spreadjs_导出 Excel 显示复选框而不是布尔值-demo.zip”指的是一个使用SpreadJS库创建的示例，该示例展示了如何在导出到Excel时将数据中的布尔值（通常是True/False）替换为复选框的视觉表示。SpreadJS是一个...

    多选框的运用.rar

    在这个例子中，所有`name`属性相同的多选框被视为一组，通常用于后台处理时收集相同类型的用户输入。 6. **CSS样式化**：虽然多选框的样式受到浏览器限制，但可以使用CSS伪类如`:checked`来改变其周围元素的状态，...

    js获取复选框选中项的值

    在探讨如何使用JavaScript（简称JS）来获取复选框（checkbox）选中项的值之前，我们首先需要理解复选框的基本概念以及它在网页表单中的作用。复选框是一种常用的HTML元素，用于允许用户从多个选项中选择一个或多个...

    javascript+css 下拉多选框插件

    通常，它可能包含一个JavaScript文件（如`multipleSelect.js`），用于实现多选框的功能，以及一个CSS文件（如`multipleSelect.css`），用于设定样式。 在JavaScript部分，我们可能会遇到以下关键概念： 1. DOM操作...

    js多选框 全选 全不选 反选

    js多选框设计 有全选 全不选 反选等功能

    用原生JS实现简单的多选框功能

    总之，这个例子展示了如何使用原生JavaScript实现多选框的全选和反选功能，对于初学者来说是一个很好的实践案例，有助于理解DOM操作和事件处理。通过进一步学习和实践，你可以创建更复杂、更健壮的多选框功能。

    checkbox复选框传值

    在网页设计和开发中，复选框（Checkbox）是一种常见的用户界面元素，允许用户从多个选项中选择一个或多个。当涉及到数据提交，比如通过HTML表单POST方法将用户的选择发送到服务器并存储到数据库中时，理解如何处理复...

    复选框的全选和取消的例子

    在IT领域，尤其是在Web开发或桌面应用程序设计中，复选框（Checkbox）是常见的用户界面元素，用于允许用户从多个可选选项中选择一个或多个。"复选框的全选和取消的例子"是一个实际应用案例，展示了如何实现对一组复...

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