<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>111</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/**
*动态的给左边的下拉列表创建选项
*具体情况可以从数据库读取数据动态创建选项
*/
$(document).ready(function(){
for(var i=1;i<=5;i++)
{
$("#fb_list").append("<option value='"+i+"'>公开招标小型机采购00"+i+"</option>");
}
})
$(function(){
$("#add").click(function(){
if($("#fb_list option:selected").length>0)
{
$("#fb_list option:selected").each(function(){
$("#select_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
$(this).remove();
})
}
else
{
alert("请选择要添加的分包！");
}
})
})
$(function(){
$("#delete").click(function(){
if($("#select_list option:selected").length>0)
{
$("#select_list option:selected").each(function(){
$("#fb_list").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
$(this).remove();
})
}
else
{
alert("请选择要删除的分包！");
}
})
})
</script>
</head>
<body>
<table width="95%" cellpadding="0" align="center" class="listshow" border="1" cellspacing="0">
<tr>
<td class="black" width="30%" align="center" height="150">
<select id="fb_list" multiple="multiple" style="text-align:center;width:300px;height:150px;">
</select>
</td>
<td align="center" width="5%">
<input type="button" id="add" value="添加>>" />
<br/>
<br/>
<input type="button" id="delete" value="<<删除" />
</td>
<td class="black" width="30%" align="center">
<select id="select_list" multiple="multiple" style=" text-align:center;width:300px;height:150px;">
</select>
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">菜单2</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">...
菜单项可以通过`<el-menu-item>`或`<el-submenu>`来创建，后者可以展开子菜单。同样，可以绑定点击事件来切换视图。为了实现折叠效果，我们可以结合`<el-togglesidebar>`组件。 ```html <el-container> <el-...
-- 左边列表 --> <div class="shuttle-box"> <!-- ... --> <div class="shuttle-box-item" v-for="(vo, inx) in itemLeft" :key="inx"> <input type="checkbox" :value="inx" v-model="checkLeft" :disabled="vo...
每个列表项是`<li>`或`<option>`，并且可能带有可选的标识属性，如`data-id`，用于关联数据。 CSS则用于美化这些元素，例如设置边框、内边距、背景色，以及高亮选中状态等。我们还需要通过CSS为用户提供反馈，比如...
在网页设计中，"左边一级导航js右边二级导航js"是一种常见的布局模式，它涉及到前端开发中的JavaScript技术，用于创建用户友好的交互式导航菜单。这种布局方式通常应用于大型网站，帮助用户快速定位并访问他们感兴趣...
在本文中，我们将深入探讨如何使用JavaScript来实现一个功能，即允许用户将左边下拉框中的选项移动到右边下拉框，并支持多选操作及列表内项目的上下移动。这个功能对于构建具有交互性的用户界面非常有用，特别是当...
在JavaScript前端开发中，我们经常需要处理用户交互，例如将左边列表中的选项移动到右边，或者反之。这个功能在各种应用场景中都很常见，比如设置、配置界面等。本篇文章将详细讲解如何用JavaScript实现这样的功能，...
根据给定文件信息，我们可以提炼出以下关于Vue.js实现左边导航切换右边内容的知识点： 1. **导航与内容切换的实现原理**： - 使用Vue.js框架，可以通过双向数据绑定特性来实现左边导航栏和右边内容的动态切换。 -...
在前端开发中，JavaScript（简称JS）与CSS的交互是实现动态效果的重要手段之一。通过JS操作DOM元素来改变其CSS样式，可以轻松地实现动画效果、响应式布局调整等功能。本文将详细介绍如何利用JavaScript控制CSS属性，...
--> </ul> </div> <div id="target"> <ul> </ul> </div> ``` 2. CSS 布局：为了实现双栏效果，我们可以使用Flexbox或Grid布局。例如，使用Flexbox可以让两个栏等宽排列： ```css #container { display: flex;...
-- 如果没有 jQuery，请从 https://code.jquery.com/ 下载最新版本 --> </head> <body> <h2>左侧选择项</h2> <select id="leftSelect" multiple> <option value="item1">项目1</option> <option value="item2">...
Ajax（Asynchronous JavaScript and XML）技术结合div元素，可以实现“左边菜单、右边内容”的动态加载效果，从而提供更流畅的用户体验，而无需每次操作都刷新整个页面。以下将详细介绍这种效果的实现步骤。 1. **...
在Vue.js中实现锚点链接平滑滚动是一种常见的交互效果，尤其在长页面导航或内容丰富的网站中。这里我们将详细探讨如何通过监听滚动事件来实现这一功能，以及涉及到的关键技术点。 首先，我们需要理解`scrollTop`...
在IT行业中，网页设计与开发是一项至关重要的技能，其中JavaScript（JS）作为客户端脚本语言，经常被用来实现各种交互式效果。"两边漂浮和中间漂浮组合"的描述可能指的是一个网页设计中的特效，它涉及到元素在页面上...
在“左边菜单,右边内容”的设计中，通常左侧会使用ListView、RecyclerView或者NavigationView来展示菜单项，右侧则可能是Fragment或者Activity来承载具体的内容。 Android源码是开放的，这为开发者提供了深入了解...
-- 选项在这里 --> </select> <select id="selected" multiple> </select> <script src="jquery.js"></script> <script src="multiselect.js"></script> <script> $(document).ready(function() { $("#...
1. **并排展示**：双日历布局，左边选择开始日期，右边选择结束日期，方便用户同时查看和选择日期范围。 2. **自定义样式**：支持自定义CSS样式，可以根据项目需求调整外观以匹配网站设计。 3. **事件监听**：提供...
这包括两个`<select>`元素（一个代表左侧列表，另一个代表右侧列表）和两个按钮，分别用于将选中项从左边移动到右边，以及从右边移动到左边。 ```html <div id="selector"> <select multiple id="leftList">...
// 解决右边最后一项从右边拖左边，有undefined的问题 } this.$set(this.value, oldIndex, this.value[newIndex]); this.$set(this.value, newIndex, temp); } }); // 对左侧列表创建Sortable实例并监听拖拽...