`
weiweichen1985
  • 浏览: 139990 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

支持多选的select

阅读更多
<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>
分享到:
评论

相关推荐

    下拉框多选select多选

    这里的`multiple`属性告诉浏览器该下拉框支持多选。每个`&lt;option&gt;`标签代表一个可选项,`value`属性用于设定选项的值,而文本内容则显示在下拉菜单中。 **二、CSS美化** 默认的多选下拉框样式可能并不符合所有设计...

    原生select实现多选功能

    原生select实现多选功能

    下拉多选select multiple

    在网页设计和开发中,"下拉多选select multiple"是一种常见的交互元素,它允许用户在下拉菜单中选择一个或多个选项。Bootstrap框架提供了一种优雅的方式来实现这样的功能,同时增强了用户体验,尤其是在数据量较大时...

    select 下拉框可以多选

    在某些场景下,我们可能需要使`select`下拉框支持多选,即用户可以同时勾选多个选项。这就是"select下拉框可以多选"这个主题所涵盖的知识点。 首先,要实现`select`下拉框的多选功能,我们需要在`&lt;select&gt;`标签中...

    xm-select,一款简单多选的select插件

    《XM-SELECT:一款高效实用的多选下拉框插件》 在Web开发中,Select组件是不可或缺的一部分,尤其在处理多选场景时,它的便捷性和灵活性显得尤为重要。XM-SELECT就是这样一款专为解决多选问题而设计的插件,它以其...

    Jquery selectbox 支持多选

    selectclass:’ddl-select’,//选框样式 listboxclass:’ddl-listbox’,//展开的列表框样式 selected:[],//选中的对象value, data:{},//数据,格式:{value:name} onchange:function(text,value){ //回调函数 ...

    jQuery插件-多选全选实时搜索下拉框

    传统的HTML下拉框(`&lt;select&gt;`)仅支持单选,而多选下拉框则是对这一限制的扩展。通过jQuery插件,我们可以实现多选功能,允许用户勾选多个选项。这通常通过将`&lt;select&gt;`元素替换为一组`&lt;input type="checkbox"&gt;`和...

    select下拉框支持搜索并可多选

    在网页开发中,"select下拉框支持搜索并可多选" 是一个常见的交互功能,它极大地提高了用户体验,尤其在面对大量选项时。这个功能通常通过JavaScript库来实现,结合CSS进行样式定制,以达到美观且实用的效果。在这个...

    SelectBox下拉复选框多选插件

    1. **下拉列表多选框**:传统的HTML `&lt;select&gt;` 元素只支持单选,但通过添加多选功能,用户可以在一个下拉菜单中选取多个值。这通常通过设置`&lt;option&gt;`标签的`multiple`属性来实现。 2. **多选框**:多选框...

    select多选下拉框美化

    3. **模拟多选框**:由于原生的多选select在某些情况下无法完全满足设计需求,我们可以使用HTML和CSS创建一个模拟的多选框。这通常涉及到使用`&lt;ul&gt;`和`&lt;li&gt;`元素来构建列表,每个`&lt;li&gt;`代表一个选项,通过`...

    div 模拟 select 多选

    div 模拟 select 多选 实现还有点bug,望大家一起改正。

    多选多select

    3. **右侧选项列表**:这部分同样包含了一个`&lt;select&gt;`标签,其ID为`listRight`,也支持多选。 #### 四、JavaScript逻辑分析 接下来,我们重点分析JavaScript部分的逻辑实现。 ##### 1. `to`函数 该函数负责处理...

    Select多选

    5. **自定义事件**:layui-select-ext支持自定义事件绑定,开发者可以根据业务需求,监听用户的选中、取消、搜索等操作,从而实现更复杂的逻辑。 6. **API接口与配置项**:插件提供了丰富的API接口和配置项,开发者...

    支持多选的QComBobox(含全选选择框)

    本篇文章将详细介绍如何在Qt中实现一个支持多选的QComboBox,并且包含全选选择框的特性。 首先,为了实现多选功能,我们需要自定义QComboBox类。文件`MultipleSelectCombobox.cpp`和`MultipleSelectCombobox.h`就是...

    html多选下拉框 ,CheckBox的Select组件 可多选的下拉框

    在HTML中,创建一个可多选的下拉框通常涉及到`&lt;select&gt;`元素与`&lt;option&gt;`元素的组合,但为了实现多选功能,我们需要使用`&lt;input type="checkbox"&gt;`和自定义的JavaScript或者利用现代浏览器支持的Web组件技术。...

    带搜索的下拉框,并且支持多选

    在IT界,尤其是在前端开发中,"带搜索的下拉框,并且支持多选"是一个常见的功能需求。这种设计主要用于提高用户体验,使用户能够在大量的选项中快速定位并选择多个符合需求的项目。以下是对这个主题的详细解释: 一...

    select多选与美化

    "select多选与美化"这个主题关注的是如何在HTML的下拉列表中实现多选功能,并且兼容各种主流浏览器,包括Firefox、Opera、Chrome、Safari以及IE6到IE9。这通常涉及到JavaScript库,特别是jQuery的使用,以及CSS样式...

    jsp select 带多选框

    HTML的`&lt;select&gt;`元素默认只支持单选,但通过添加`multiple`属性,我们可以将其转变为多选框。下面是一个基本的JSP多选框示例: ```jsp ; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html&gt; 多选下拉框...

    进行模糊查询+多选功能的下拉框(select) 模糊加载

    "进行模糊查询+多选功能的下拉框(select) 模糊加载"是一个针对前端表单元素优化的实践,旨在提供更好的用户体验。传统的HTML `&lt;select&gt;` 元素虽然简单易用,但其功能相对有限,无法满足复杂的用户需求,例如模糊...

    element ui select多选组件 重构

    2. **多选功能**:`el-select` 支持多选模式,用户可以通过 `multiple` 属性开启。在多选模式下,用户可以同时选择多个选项,这些选定的值将被存储在一个数组中。 3. **插件集成(plugins)**:可能需要引入第三方...

Global site tag (gtag.js) - Google Analytics