kingmxj
- 浏览: 182474 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
lixiaoyang1216：
请问，为什么我压缩后，压缩文件为空。原文件是有值的。？？？？
压缩文件（ant.jar） -
九牛一毛：
var zNodes =[
{ name:"父 ...
jQuery zTree -
jyjava：
VO--》BO--》PO，呵呵
vo-po -
jd406：
帅哥，能整成文档上传个附件不？
Word版的也行啊，我再把它转 ...
经典sql大全 -
释皇天：
不行啊！报 document.all.WebBrowser.E ...
js调用ie打印
<!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>
<INPUT TYPE="text" id="data" style="width:700px;height:50px" value="王立,李平,张立,冯立,立为,张明,王一,李国,平民,王与" readonly>
<TABLE>
<TR>
<TD colspan="3">
<INPUT TYPE="text" NAME="tt" onkeyup="changeValue(this.value)">
</TD>
</TR>
<TR>
<TD>
<SELECT NAME="" size="10" style="width:150px" id="s1" ondblclick="changePosition('1')" >
</SELECT>
</TD>
<TD>
<input type="button" value=">>" id="b1" onclick="changePosition('1')"/><br/>
<input type="button" value="<<" id="b2" onclick="changePosition('2')"/><br/>
<input type="button" value=">>>>" id="b1" onclick="changeAll('1')"/><br/>
<input type="button" value="<<<<" id="b2" onclick="changeAll('2')"/><br/>
</TD>
<TD>
<SELECT NAME="" size="10" style="width:150px" id="s2" ondblclick="changePosition('2')" >
</SELECT>
</TD>
</TR>
</TABLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var s1 = document.getElementById("s1");//左面的select
var s2 = document.getElementById("s2");//右面的select
/**
** z=1时，从左到右；z=2时，从右到左
**/
function changePosition(z){
var o1 = s1.options;
if(z=="2"){
o1 = s2.options;
}
for(var i=0;i<o1.length;i++){
if(o1[i].selected){
var newOption = document.createElement("option");
newOption.value = o1[i].value;
newOption.innerHTML = o1[i].innerHTML;
if(z=="2"){
s1.appendChild(newOption);
}else{
s2.appendChild(newOption);
}
o1[i]=null;
}
}
}
/**
** z=1时，从左到右；z=2时，从右到左
**/
function changeAll(z){
var o1 = s1.options;
if(z=="2"){
o1 = s2.options;
}
var len = o1.length;
for(var i=0;i<len;i++){
var oldOption = o1[i];
var newOption = document.createElement("option");
newOption.value = oldOption.value;
newOption.innerHTML = oldOption.innerHTML;
if(z=="2"){
s1.appendChild(newOption);
}else{
s2.appendChild(newOption);
}
}
if(z=="2"){
s2.innerHTML = "";
}else{
s1.innerHTML = "";
}
}
/**
** 当在输入框输入数据时，左面的select会根据输入值比对信息，显示含有输入值的数据
**/
function changeValue(z){
var s1 = document.getElementById("s1");//左面的select
var s2 = document.getElementById("s2");//右面的select
var o2 = s2.options;
var data = document.getElementById("data").value;//存放数据的输入框(如果要用到项目中，这里一定要改)
var ds = data.split(",");//数据用","隔开
//如果输入值为空
if(z==""){
s1.innerHTML = "";
for(var i=0;i<ds.length;i++){
var _va = 0;//用于比较左右select中的值是否相等
var va = ds[i];
//循环右面的select中的value，右面有的option左面就不应该有了
for(var j=0;j<o2.length;j++){
var _o2 = o2[j].innerHTML;
if(va == _o2){
_va = 1;
break;
}
}
//右面的option没有的，左面有
if( _va == 0 ){
var newOption = document.createElement("option");
newOption.value = va;
newOption.innerHTML = va;
s1.appendChild(newOption);
}
}
}else{//输入值不为空
s1.innerHTML = "";
for(var i=0;i<ds.length;i++){
var _va = 0;//用于比较左右select中的值是否相等
var va = ds[i];
//左面的select必须包含输入值
if(va.indexOf(z) != -1){
//循环右面的select中的value，右面有的option左面就不应该有了
for(var j=0;j<o2.length;j++){
var _o2 = o2[j].innerHTML;
if(va == _o2){
_va = 1;
break;
}
}
//右面的option没有的，左面有
if( _va == 0 ){
var newOption = document.createElement("option");
newOption.value = va;
newOption.innerHTML = va;
s1.appendChild(newOption);
}
}
}
}
}
//初始化数据
function initData(){
var s1 = document.getElementById("s1");
var data = document.getElementById("data").value;
var ds = data.split(",");
for(var i=0;i<ds.length;i++){
var va = ds[i];
var newOption = document.createElement("option");
newOption.value = va;
newOption.innerHTML = va;
s1.appendChild(newOption);
}
}
initData();
//-->
</SCRIPT>
</BODY>
</HTML>
分享到：
发表评论
-
frameset
2012-03-06 11:51 896<%@ page language="java ... -
xml学习链接地址
2011-09-01 15:43 732http://www.w3school.com.cn/inde ... -
更改浏览器图片
2011-05-06 16:00 805在head中加入 <link rel="sho ... -
分页当前页码居中效果
2010-05-07 13:39 1240<!DOCTYPE HTML PUBLIC " ... -
飘图
2010-04-12 16:39 754document.writeln("<DIV ... -
input file的另类做法
2010-03-17 11:57 737<!DOCTYPE html PUBLIC " ... -
iframe自适应高度
2010-01-18 10:54 836<iframe src="/proInfo.d ... -
<input type="file">加样式
2009-12-14 10:49 3109<style> input{border:1p ... -
模式对话框父窗口
2009-11-27 16:35 1429通常使用window.open的方式开启新窗口的话 要取得父窗 ... -
页面中的视频
2009-11-19 08:23 706<embed src="D:\CVSROOT\ ... -
截取字符串的样式
2009-09-29 12:25 860<!DOCTYPE HTML PUBLIC " ... -
<input type="file">中不可以输入
2009-09-14 16:15 801<input type="file" ... -
如何删除<input type="file">中的value
2009-09-01 18:46 1444<input type=file name=tt ... -
判断两位有效数字
2009-08-21 14:44 886<INPUT TYPE="text&quo ... -
HTML中password与text的默认长度大小不一致问题
2009-05-22 16:46 1051<input type="text" ... -
不提示就直接关闭窗口
2009-05-19 14:46 907<BODY> <SCRIPT LANGU ... -
DOCTYPE 文档类型（网页标准）
2009-04-24 09:49 736DOCTYPE是document type(文档类型)的简写， ... -
模式对话框
2009-04-21 15:43 8321.弹出对话框的页面： <%@page contentT ... -
Display Tag
2009-04-21 14:43 871Display Tag Lib是一个标签 ... -
多文件上传
2009-04-21 14:31 669多文件上传
相关推荐
本主题聚焦于如何实现`select`选择框内容的左右移动功能，这是一种增强用户体验的方式，尤其适用于需要用户在多个选项间频繁切换的场景。下面将详细探讨这一功能的实现原理、技术栈以及相关的编程知识点。 1. **...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！
在JavaScript编程中，创建具有左右两个下拉选择框并实现左右上下移动功能是一个常见的交互设计。这个功能常常用于用户在两个列表之间转移选项，比如在“可用”和“已选”之间切换。以下是对这个主题的详细解释： ...
根据提供的文件信息，本文将详细解析“jquery左右选择框”的实现原理、代码结构及功能特点。此案例展示了如何使用jQuery库来实现一个简单的左右选择框交互功能，这在实际项目中非常常见，例如用户权限分配、多选项...
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下： select选择框内容左右移动，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，运行效果图： 具体代码如下 <!...
在HTML中，`<select>`元素用于创建下拉菜单，但有时我们需要更高级的交互方式，比如左右滑动的选择框。通过jQuery，我们可以自定义这样的组件，使其具有更友好的用户体验。 1. **组件设计**： - 左侧区域显示可供...
**jQuery双向列表左右移动选择框**是一种常见的交互设计，它允许用户在两个列表之间移动项目，通常用于选择或分配选项。这种设计广泛应用于各种应用程序，如设置管理、权限分配等。下面将详细介绍如何实现这样的功能...
"可浮动的左右列选择框"是一种创新的UI设计，它提供了更好的用户体验，特别是在需要进行多选操作时。这种设计将待选项和已选项分别显示在左右两列，让用户能够清晰地看到自己的选择状态，同时允许方便地增删选项。 ...
本话题聚焦于使用jQuery来实现两个select元素之间的选中值互换功能。这对于用户界面设计，尤其是在需要双向联动或者数据交换的场景下，是一个实用的功能。 首先，我们要了解HTML中的`<select>`元素。它是创建下拉...
本文将深入探讨“jquery双向选择器两侧select框列表文字左右选择器代码”，这是一种常见于网页表单设计的功能，用于实现两个下拉列表（select框）之间的双向同步选择。 首先，我们需要理解jQuery的选择器。jQuery...
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下： select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动...
对于“可视化操控左右多选Select”的组件，我们首先要定义两个主要部分：左侧的选择框（源选项）和右侧的选择框（已选选项）。每个选择框都是一个React组件，它们可能包含一个`<select>`元素，或者自定义的UI来模拟...
Bootstrap 左右多选多Multiselect插件是一种基于流行的前端框架Bootstrap开发的组件，它极大地扩展了Bootstrap原生的下拉选择框功能。这个插件允许用户在两个独立的列表之间进行选择，使得多选操作更加直观和高效，...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！
在某些交互式应用中，我们可能需要实现一个功能，让用户能够从一个`<select>`框（通常称为“源”或“左侧”框）选择一个或多个选项，然后将这些选项移动到另一个`<select>`框（“目标”或“右侧”框）。这种操作常见...
这个场景中，我们讨论的是如何实现一个功能，让用户可以在两个Select下拉框之间移动选择的值，这种功能常见于多选设置或者数据迁移的界面。下面我们将深入探讨如何实现这样的功能。 首先，我们需要两个HTML Select...
在网页设计中，"select互选效果"是一种交互设计特性，允许用户在两个或多个下拉选择框（`<select>`元素）之间进行双向选择，实现数据的同步更新。这样的功能常见于需要关联两个列表项的场景，比如地区选择、类别筛选...