`

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

    基于QT的自定义多选框控件

    "基于QT的自定义多选框控件"就是这样一个案例，它利用了QT的QML（Qt Quick）技术来实现。QML是一种声明式语言，允许开发者以JSON风格的语法创建用户界面，并与C++代码进行交互。 首先，我们要理解QML的基本概念。...

    js控制多选框

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

    JQUERY组件 多选框

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

    多选框的处理操作JS

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

    jquery多选框实现单选效果

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

    11款下拉式多选框

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

    带有多选框的菜单

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

    js 特效 5右拖动--多选框控制

    在JavaScript（JS）编程中，"5右拖动--多选框控制"是一种常见的交互式特效，主要用于增强用户的操作体验。这种特效允许用户通过拖动一个元素（通常是一个滑块或者选择器）来控制多个多选框的可见性。在这个场景中，...

    uniapp多选标签/多选按钮/多选框源码

    本项目着重讲解了如何在`uni-app`中实现多选标签、多选按钮和多选框的功能，这对于构建用户交互丰富的应用至关重要。 首先，我们来看“多选标签”。在UI设计中，多选标签（Multiple Select Tags）通常用于让用户在...

    javascript+css 下拉多选框插件

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

    js多选框 全选 全不选 反选

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

    JS面向对象之多选框实现

    在本篇标题为“JS面向对象之多选框实现”的文章中，主要讨论了如何利用JavaScript中的面向对象编程技术来实现一个多选框的功能。面向对象编程（Object-Oriented Programming，简称OOP）是一种编程范式，它使用“对象...

    checkbox复选框传值

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

    鼠标框选多选框、复选框

    js实现拖动鼠标框选复选框,想要的来下吧

    js 实现 获取复选框的选择项

    js 实现 获取复选框的选择项 ! 值得下载看看!资源免费,大家分享!!

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

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

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