<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Select下拉列表框进行多选、移除、交换内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body style="font-size:12px">
<script language=javascript>
function selectMove(oSource,oTarget,cWhich) //两个选择框选项之间的移动，oSource为源选择框，oTarget为目标选择框，cWhich为提示文字，取值”左“或”右“。
{
if(!oSource.options.length)
{
alert(cWhich+"侧列表中已没有选项可选，无法移动！");
return;
}
if(oSource.selectedIndex==-1)
{
alert("操作前您首先应该从"+cWhich+"侧列表中选择一项！");
return;
}
var mySld=new Array();
for(i=0;i<oSource.options.length;i++)
if(oSource.options[i].selected)
mySld[mySld.length++]=i;
for(i=0;i<mySld.length;i++)
{
oTarget.options.length++;
oTarget.options[oTarget.options.length-1].text=oSource.options[mySld[i]].text;
oTarget.options[oTarget.options.length-1].value=oSource.options[mySld[i]].value;
}
for(i=0;i<mySld.length;i++)
{
for(j=mySld[i]-i;j<oSource.options.length-1;j++)
{
oSource.options[j].text=oSource.options[j+1].text;
oSource.options[j].value=oSource.options[j+1].value;
}
oSource.options.length--;
}
}
function moveAll(oSource,oTarget)
{
var n=oTarget.options.length;
oTarget.options.length=n+oSource.options.length;
for(i=n;i<oTarget.options.length;i++)
{
oTarget.options[i].text=oSource.options[i-n].text;
oTarget.options[i].value=oSource.options[i-n].text.value;
}
oSource.options.length=0;
}
</script>
<form name=form1>
<table class=setrole_tab>
<tr>
<td>
未加入角色<br>
<select size=15 style="width:150px;" name=notadded_role ondblclick="selectMove(document.form1.notadded_role,document.form1.added_role,'左')" multiple>
<option>aaaaaaaa</option>
<option>bbbbbbbb</option>
<option>cccccccc</option>
<option>dddddddd</option>
</select>
</td>
<td>
<a href="javascript:moveAll(document.form1.notadded_role,document.form1.added_role);">全部右移</a><br>
<a href="javascript:selectMove(document.form1.notadded_role,document.form1.added_role,'左')">右移</a><br>
<a href="javascript:selectMove(document.form1.added_role,document.form1.notadded_role,'右')">左移</a><br>
<a href="javascript:moveAll(document.form1.added_role,document.form1.notadded_role);">全部左移</a>
</td>
<td>
已加入角色<br>
<select size=15 style="width:150px;" name=added_role ondblclick="selectMove(document.form1.added_role,document.form1.notadded_role,'右')" multiple>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
分享到：
相关推荐
jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码 jquery.selectbox.js select下拉菜单美化代码
在网页设计中，为了提升用户体验，常常需要对默认的HTML元素进行美化，其中就包括了对`<select>`下拉框的改进。本教程主要关注如何使用...希望这个教程能帮助你理解并实现js select框美化，让你的网页设计更加出色。
总的来说，“图标文字类型的Js Select下拉菜单”是一种结合了图形和文本的交互设计，它利用JavaScript和CSS来创建一个具有苹果风格的用户体验。通过理解和应用这些技术，开发者可以创建出更加吸引用户、易于操作的...
在JavaScript编程中，"js select多级联动"是一种常见的交互设计技术，主要用于创建具有层级关系的下拉选择框。这种技术常用于展示如地区选择、组织结构或产品分类等具有层次结构的数据。在这个场景中，当用户在第一...
原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码
js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化 js select框美化用input文本框模拟select框美化
总结，`select`元素在JavaScript中是不可或缺的一部分，尤其在表单提交和用户交互场景中。通过熟练掌握它的用法和相关事件处理，可以构建更丰富、更具有交互性的网页应用。希望这个详解能帮助你理解和运用`select`...
然而，标准的 `<select>` 标签默认只支持单选，但通过 JavaScript（JS） 和 jQuery（JQ） 的帮助，我们可以实现多选功能，即复选。这里将详细讲解如何实现 `JS select 标签复选`。 首先，我们需要一个基本的 HTML ...
本文将详细介绍一种专门用于美化`select`框的JavaScript插件，以及如何实现不同风格的select美化列表框，如U-Box风格、Mac风格和TM2008风格。 首先，我们讨论JS Select框美化插件的基本原理。这种插件通常会将原生...
`select2.min.js`是JavaScript文件的最小化版本，用于减少页面加载时间；而`select2.min.css`则是CSS文件的最小化版本，负责样式呈现。这两个文件应当在HTML页面中正确引用，以便Select2库正常工作。 在实际应用中...
然而，有时为了实现更复杂的功能或者更好的视觉效果，开发者可能会选择使用JavaScript来模拟`<select>`下拉菜单。这种方法可以提供更多的自定义选项，如动画效果、多级下拉、异步加载等。 ### 1. 常规HTML `<select...
因此，"js select美化下拉框美化" 成为了一个重要的开发话题。这个主题主要涉及到JavaScript、CSS以及可能的库或框架的应用，以提升下拉框的视觉效果和用户体验。 JavaScript 是实现下拉框美化的关键工具，它可以...
在JavaScript中，`<select>`元素是用来创建下拉列表的，而`<option>`标签则用于定义下拉列表中的选项。这篇博客“javascript操作Select标记中options集合”深入探讨了如何利用JavaScript动态地管理和操作这些选项。...
每个`<select>`元素需要一个唯一的ID，以便于JavaScript访问和操作。 2. **初始化数据**： 数据通常以JSON格式存储，包含省、市、区的层级关系。例如： ```json { "province": [ {"id": "1", "name": "省份1",...
### Js操作Select大全知识点详解 #### 一、概述 JavaScript（简称JS）是网页开发中不可或缺的一部分，尤其在处理用户界面交互方面具有重要作用。本文档将详细介绍如何利用原生JavaScript和jQuery来操作`<select>`...
总结起来，`js`加载`select`项是一项基础的前端技术，而`JSelect`则通过JavaScript为`select`元素提供了丰富的自定义样式和交互功能，极大地提升了用户体验。在实际项目中，结合这两者可以构建出既实用又美观的下拉...
在JavaScript编程中，动态生成`select`元素中的`option`是一项常见的需求，特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能，同时结合提供的`autoSelect.html`和`autoselect.txt`...
在前端开发中，JavaScript（JS）常常用于处理用户交互，其中`select`元素是一个常见的选择项，常用于创建下拉菜单。本项目"js select选中显示不同表单内容.zip"涉及的技术点主要集中在如何根据`select`元素的选项...
标题"select2js，css和中文包"表明我们关注的是一个名为Select2的JavaScript库，它涉及到CSS样式以及中文语言支持。Select2是一个强大的、可定制的下拉选择框替代方案，它提供了多选、单选以及输入匹配的功能。 ...