<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样式...
HTML的`<select>`元素默认只支持单选,但通过添加`multiple`属性,我们可以将其转变为多选框。下面是一个基本的JSP多选框示例: ```jsp ; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> 多选下拉框...
"进行模糊查询+多选功能的下拉框(select) 模糊加载"是一个针对前端表单元素优化的实践,旨在提供更好的用户体验。传统的HTML `<select>` 元素虽然简单易用,但其功能相对有限,无法满足复杂的用户需求,例如模糊...
2. **多选功能**:`el-select` 支持多选模式,用户可以通过 `multiple` 属性开启。在多选模式下,用户可以同时选择多个选项,这些选定的值将被存储在一个数组中。 3. **插件集成(plugins)**:可能需要引入第三方...