<!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">aaa</option>
<option value="1">bbb</option>
<option value="2">c</option>
<option value="3">d</option>
<option value="4">e</option>
<option value="5">f</option>
<option value="6">g</option>
<option value="7">h</option>
<option value="8">i</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>
<input onclick="aa();"> sss</input>
</td>
</tr>
</table>
</BODY>
</HTML>
<script language="javascript">
function aa(){
var bbb="";
for(var i=0;i<document.getElementById("selectdestid").length;i++){
var aaa=document.getElementById("selectdestid").options[i].text;
bbb=aaa+","+bbb;
}
alert(bbb);
}
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);
alert(optionsObjects.length);
for(var o=0;o<optionsObjects.length;o++)
{
if(optionsObjects.options[o].selected)
{
var optionsvalue=optionsObjects.options[o].value;
var optionstext=optionsObjects.options[o].text;
removeoption(objectid,optionstext,optionsvalue)
o=o-1;
}
}
}
//删除单个选项
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>
分享到：
相关推荐
在IT行业中，前端开发是不可或缺的一部分，而"multiple-select-1.5.2_lamp7ds_css/multiple-select_"这个标题暗示着一个专门用于实现HTML select元素多选功能的库。这个库可能是一个JavaScript插件，它使得用户在...
标题“multiple-select-master”指的是一个专门用于实现多选下拉框功能的代码库或项目。在Web开发中，这样的组件通常用于提供用户可以选择多个选项的交互界面，它扩展了传统单选下拉列表的功能，增加了用户体验和...
3. **初始化插件**：在文档加载完成后，使用`$('select').multipleSelect(options)`方法初始化插件，options是可选的配置对象，例如`{width: '100%', multiple: true}`。 4. **调用方法**：插件提供了一些实用的方法...
3. **初始化插件**：在JavaScript中，通过调用`.multipleSelect()`方法来初始化插件。例如： ```javascript $(document).ready(function() { $('#yourSelectElement').multipleSelect(); }); ``` 这里，`#...
$('#mySelect').multipleSelect({ // 这里可以配置插件的选项，比如： multiple: true, // 默认为true，表示开启多选 filter: true, // 开启搜索过滤功能 selectAll: true, // 是否显示全选/全不选按钮 width:...
在提供的压缩包"select_multiple三级分类级联"中，可能包含了HTML文件、CSS文件和JavaScript文件，分别负责结构、样式和交互逻辑。通过查看和分析这些文件，我们可以学习到如何实现这种复杂的交互效果，并可能找到一...
综上所述，Layui的“layui-select-multiple”提供了一整套美观且功能丰富的多选下拉框解决方案，适合HTML5项目，能够帮助开发者快速构建具有出色用户体验的Web应用。其样式可定制，组件API易用，使得在网页中实现...
在HTML中，`<select>`标签用于创建下拉列表，而`multiple`属性是一个非常实用的特性，它允许用户在下拉列表中选择多个选项，而不是仅限于单选。这个属性尤其适用于需要用户从一系列选项中进行多选的情况，如设置兴趣...
在网页设计和开发中，"下拉多选select multiple"是一种常见的交互元素，它允许用户在下拉菜单中选择一个或多个选项。Bootstrap框架提供了一种优雅的方式来实现这样的功能，同时增强了用户体验，尤其是在数据量较大时...
首先，要实现select多选，我们需要在HTML结构中添加`multiple`属性到`<select>`标签内，例如： ```html <select name="demo" lay-filter="test" multiple> 选项1 选项2 ... </select> ``` 这里的`lay-filter`属性...
通常情况下，在HTML中使用`<select>`标签并设置`multiple`属性可以让用户通过按下Ctrl键（或Shift键）来选择多个选项。但在本案例中，我们希望去掉这个限制，使得用户点击即可选择多个选项。 #### HTML结构 ```...
首先，要实现`select`下拉框的多选功能，我们需要在`<select>`标签中添加一个`multiple`属性。这个属性告诉浏览器用户可以选取多个值。下面是一个基本的多选`select`下拉框的HTML结构示例： ```html <select ...
<select multiple id="hiddenSelect" style="display:none;"> <option value="option1">Option 1 <option value="option2">Option 2 ... </select> Option 1 Option 2 ... ``` 2. **...
在HTML中，`<select>`元素用于创建下拉列表，而`multiple`属性则使得用户可以在下拉列表中选择多个选项。本示例主要讲解如何使用`<select>`的`multiple`属性创建一个多选下拉框，并通过JavaScript来处理用户的选择。...
在网页设计和开发中，`select`元素是用于创建下拉菜单的标准HTML组件。...<select class="chosen-select" multiple style="width:350px;"> <option>Option 1 <option>Option 2 <!-- 更多选项 --> </select> ...
<select multiple class="form-control"> <option>Option 1 <option>Option 2 <option>Option 3 </select> $(document).ready(function() { $('.form-control').select2(); }); ``` 在以上代码中，`.form-...
1. HTML结构：首先，需要创建三个`<select>`元素，每个元素都有特定的ID，例如：`select1`、`select2`和`select3`，并设置初始选项。 2. jQuery绑定：使用jQuery的`$(document).ready()`函数确保页面加载完成后执行...