<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<table>
<tr>
<td>
<select multiple="multiple" size="15" style="width=200px" id="selectsrcid">
<option value="0">测试一</option>
<option value="1">测试二</option>
</select>
</td>
<td>
<input type="button" value=" >> " onclick="javascript:srcToDest('selectsrcid','selectdestid')">
<br>
<input type="button" value=" << " onclick="javascript:destToSrc('selectdestid')">
</td>
<td>
<select multiple="multiple" size="15" style="width=200px" id="selectdestid">
</select>
</td>
</tr>
</table>
</BODY>
</HTML>
<script language="javascript">
function srcToDest(srcid,destid)
{
var optionsObjects=document.getElementById(srcid);
var optionsSubObjects=document.getElementById(destid);
for(var o=0;o<optionsObjects.length;o++)
{
if(optionsObjects.options[o].selected==true)
{
var optionsvalue=optionsObjects.options[o].value;
var optionstext=optionsObjects.options[o].text;
addoptions(destid,optionstext,optionsvalue)
}
}
}
//向目标
function addoptions(objectid,textvalue,optionsvalue)
{
var optionsSubObjects=document.getElementById(objectid);
var hasexist=0;
for(var o=0;o<optionsSubObjects.length;o++)
{
var optionsvalue_sub=optionsSubObjects.options[o].text;
if(optionsvalue_sub==textvalue)
hasexist+=1;
}
if(hasexist==0)
{
optionsSubObjects.add(new Option(textvalue, optionsvalue));
}
}
//将对象中所选的项删除
function destToSrc(objectid)
{
var optionsObjects=document.getElementById(objectid);
for(var o=0;o<optionsObjects.length;o++)
{
if(optionsObjects.options[o].selected==true)
{
var optionsvalue=optionsObjects.options[o].value;
var optionstext=optionsObjects.options[o].text;
removeoption(objectid,optionstext,optionsvalue)
}
}
}
//删除单个选项
function removeoption(objectid,textvalue,optionsvalue)
{
var optionsSubObjects=document.getElementById(objectid);
for(var o=0;o<optionsSubObjects.length;o++)
{
var optionsvalue_sub=optionsSubObjects.options[o].text;
if(optionsvalue_sub==textvalue)
optionsSubObjects.options.remove(o);
}
}
</script>
分享到：
相关推荐
HTML的`<select>`元素默认只支持单选，但通过添加`multiple`属性，我们可以将其转变为多选框。下面是一个基本的JSP多选框示例： ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" ...
<select class="chosen-select" multiple style="width:350px;"> <option>Option 1</option> <option>Option 2</option> <!-- 更多选项 --> </select> <script src=...
如果需要允许用户选择多个选项，可以添加`multiple`属性到`<select>`标签。例如： ```html <select multiple> <option value="1">选项1</option> <option value="2">选项2</option> </select> ``` 此时，用户可以...
在HTML中，`<select>`元素用于创建下拉列表，而`multiple`属性则使得用户可以在下拉列表中选择多个选项。本示例主要讲解如何使用`<select>`的`multiple`属性创建一个多选下拉框，并通过JavaScript来处理用户的选择。...
这个`<select>`元素的`multiple`属性使得用户可以同时选择多个选项。`id`属性`exampleSelectMultiple`用于将来可能的JavaScript操作。 在实际项目中，你可能会需要动态生成选项或者处理用户的选择。这时，你可以...
在网页设计中，`<select>` 标签用于创建下拉菜单，允许用户从一系列预定义的选项中进行选择。本示例关注的是如何实现两个`<select>`标签各自显示不同的内容，以及如何实现多选功能，这在数据输入或过滤场景中非常...
这种组件常被称为“CheckBox的Select”组件，它提供了比标准单选`<select>`更灵活的选择体验。 1. **基本HTML结构** 多选下拉框的基本结构通常包括一个隐藏的`<select>`元素和一组可见的`<label>`与`<input type=...
<select multiple> <optgroup label="分组1"> <option value="group1_option1">分组1-选项1</option> <option value="group1_option2">分组1-选项2</option> </optgroup> <optgroup label="分组2"> <option ...
这个插件提供了多种定制选项，包括多选、搜索过滤、分组显示等，使得在网页设计中创建美观且功能丰富的下拉选择框变得容易。 在 Bootstrap 中，`<select>` 标签通常是简单的单行下拉列表，样式相对单一。而 ...
总的来说，`<select>`标签的`multiple`属性是创建多选下拉列表的强大工具，它提供了简洁的用户界面，同时允许用户方便地选择多个选项。在实际应用中，结合CSS样式和JavaScript交互，可以打造出功能丰富的多选下拉...
`<select>`标签用于创建一个下拉列表，用户可以从其中选择一个或多个值。其基本语法如下： ```html <select name="name_attribute"> <option value="value_attribute">Text to display</option> <!-- More ...
多选通常通过使用`<select multiple>`属性来实现，允许用户同时选择多个选项： ```html <select multiple> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option ...
<select id="rightSelect" multiple></select> </body> </html> ``` 在这个例子中，我们创建了两个 select 元素，一个 ID 为 "leftSelect"，另一个为 "rightSelect"。同时，我们添加了一个按钮，ID 为 "moveButton...
在HTML中，我们首先需要定义一个`<select>`元素，并为其添加`multiple`属性，以便允许用户选择多个选项： ```html <select class="form-control" multiple> <option value="1">Option 1</option> <option value=...
`<select>` 标签用于创建一个下拉选择列表，用户可以从预设的选项中选择一个或多个项目。当表单提交时，所选的项目会被作为参数发送至服务器。 **属性详解：** - **disabled**: 如果设定，表示整个下拉列表不可用。...
jQuery MultiSelect 是一个基于 jQuery 的插件，它为传统的 `<select multiple>` 标签提供了更美观、交互性更强的界面。本教程将详细介绍如何使用已汉化的 jQuery MultiSelect 插件，以及它的主要特性。 ### 1. ...
在HTML中，`<select>`标签可以创建一个下拉列表，其中的`multiple`属性允许用户选择多个选项。但是，这样的默认样式可能并不符合所有设计需求。此时，jQuery插件如Chosen、Select2或Multiselect等就显得尤为重要，...
然而，在某些场景下，我们可能需要创建一个可以允许用户选择多个选项的下拉菜单，这就是所谓的“多选下拉选择”（Multiple Select）。在本文中，我们将深入探讨如何在HTML中实现这一功能，以及如何通过JavaScript和...
<select multiple="true"> <option value="wap">This is an option(M)</option> </select> </fieldset> ``` WML的这些基本元素和结构对于前端开发者来说是非常重要的，尤其在进行J2ME嵌入式开发时，它们构成了...