<html>
<head>
<title>支持多选的select</title>
</head>
</body>
全部添加与部分添加的实现：
<table border=0 cellpadding=0 cellspacing=0>
<form name=meizz>
<tr>
<td>
<select name=list1 size=8 multiple ondblclick="moveOption(this, this.form.list2)">
<option value=A>aaaaaaaaaa
<option value=B>bbbbbbbbbb
<option value=C>cccccccccc
<option value=D>dddddddddd
<option value=E>eeeeeeeeee
<option value=F>ffffffffff
<option value=G>gggggggggg
<option value=H>hhhhhhhhhh
</select>
</td>
<td width=40 align=center>
<input name=add type=button value=">>>" onclick="moveOption(this.form.list1,this.form.list2)">
<br/><br/>
<input name=sub type=button value="<<<" onclick="moveOption(this.form.list2,this.form.list1)">
</td><td>
<select name=list2 size=8 multiple ondblclick="moveOption(this, this.form.list1)"></select>
</td>
</tr>
</form>
</table>
<script language="javascript">
function moveOption(obj1, obj2){
//try{
var length=obj1.options.length-1;
for(i=0;i<=length;i++){
var e = obj1.options[obj1.selectedIndex];
obj2.options.add(new Option(e.text,e.value));
obj1.options.remove(obj1.selectedIndex);
}
//}catch(e){
// alert(e);
//}
}
</script>
</body>
</html>
分享到：
相关推荐
这里的`multiple`属性告诉浏览器该下拉框支持多选。每个`<option>`标签代表一个可选项，`value`属性用于设定选项的值，而文本内容则显示在下拉菜单中。 **二、CSS美化** 默认的多选下拉框样式可能并不符合所有设计...
原生select实现多选功能
在网页设计和开发中，"下拉多选select multiple"是一种常见的交互元素，它允许用户在下拉菜单中选择一个或多个选项。Bootstrap框架提供了一种优雅的方式来实现这样的功能，同时增强了用户体验，尤其是在数据量较大时...
在某些场景下，我们可能需要使`select`下拉框支持多选，即用户可以同时勾选多个选项。这就是"select下拉框可以多选"这个主题所涵盖的知识点。 首先，要实现`select`下拉框的多选功能，我们需要在`<select>`标签中...
《XM-SELECT：一款高效实用的多选下拉框插件》 在Web开发中，Select组件是不可或缺的一部分，尤其在处理多选场景时，它的便捷性和灵活性显得尤为重要。XM-SELECT就是这样一款专为解决多选问题而设计的插件，它以其...
selectclass:’ddl-select’,//选框样式 listboxclass:’ddl-listbox’,//展开的列表框样式 selected:[],//选中的对象value， data:{},//数据，格式：{value:name} onchange:function(text,value){ //回调函数 ...
传统的HTML下拉框（`<select>`）仅支持单选，而多选下拉框则是对这一限制的扩展。通过jQuery插件，我们可以实现多选功能，允许用户勾选多个选项。这通常通过将`<select>`元素替换为一组`<input type="checkbox">`和...
在网页开发中，"select下拉框支持搜索并可多选" 是一个常见的交互功能，它极大地提高了用户体验，尤其在面对大量选项时。这个功能通常通过JavaScript库来实现，结合CSS进行样式定制，以达到美观且实用的效果。在这个...
1. **下拉列表多选框**：传统的HTML `<select>` 元素只支持单选，但通过添加多选功能，用户可以在一个下拉菜单中选取多个值。这通常通过设置`<option>`标签的`multiple`属性来实现。 2. **多选框**：多选框...
3. **模拟多选框**：由于原生的多选select在某些情况下无法完全满足设计需求，我们可以使用HTML和CSS创建一个模拟的多选框。这通常涉及到使用`<ul>`和`<li>`元素来构建列表，每个`<li>`代表一个选项，通过`...
div 模拟 select 多选 实现还有点bug，望大家一起改正。
3. **右侧选项列表**：这部分同样包含了一个`<select>`标签，其ID为`listRight`，也支持多选。 #### 四、JavaScript逻辑分析 接下来，我们重点分析JavaScript部分的逻辑实现。 ##### 1. `to`函数 该函数负责处理...
5. **自定义事件**：layui-select-ext支持自定义事件绑定，开发者可以根据业务需求，监听用户的选中、取消、搜索等操作，从而实现更复杂的逻辑。 6. **API接口与配置项**：插件提供了丰富的API接口和配置项，开发者...
本篇文章将详细介绍如何在Qt中实现一个支持多选的QComboBox，并且包含全选选择框的特性。 首先，为了实现多选功能，我们需要自定义QComboBox类。文件`MultipleSelectCombobox.cpp`和`MultipleSelectCombobox.h`就是...
在HTML中，创建一个可多选的下拉框通常涉及到`<select>`元素与`<option>`元素的组合，但为了实现多选功能，我们需要使用`<input type="checkbox">`和自定义的JavaScript或者利用现代浏览器支持的Web组件技术。...
在IT界，尤其是在前端开发中，"带搜索的下拉框,并且支持多选"是一个常见的功能需求。这种设计主要用于提高用户体验，使用户能够在大量的选项中快速定位并选择多个符合需求的项目。以下是对这个主题的详细解释： 一...
"select多选与美化"这个主题关注的是如何在HTML的下拉列表中实现多选功能，并且兼容各种主流浏览器，包括Firefox、Opera、Chrome、Safari以及IE6到IE9。这通常涉及到JavaScript库，特别是jQuery的使用，以及CSS样式...
"进行模糊查询+多选功能的下拉框（select） 模糊加载"是一个针对前端表单元素优化的实践，旨在提供更好的用户体验。传统的HTML `<select>` 元素虽然简单易用，但其功能相对有限，无法满足复杂的用户需求，例如模糊...
HTML的`<select>`元素默认只支持单选，但通过添加`multiple`属性，我们可以将其转变为多选框。下面是一个基本的JSP多选框示例： ```jsp ; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> 多选下拉框...
2. **多选功能**：`el-select` 支持多选模式，用户可以通过 `multiple` 属性开启。在多选模式下，用户可以同时选择多个选项，这些选定的值将被存储在一个数组中。 3. **插件集成（plugins）**：可能需要引入第三方...