`
wyf
  • 浏览: 433391 次
  • 性别: Icon_minigender_1
  • 来自: 唐山
社区版块
存档分类
最新评论

select 左右移动

    博客分类：
  • JS
JavaScriptCSSUPHTML.net 
阅读更多 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="majianan"> 
<script language="javascript" > 
var currentSel = null; 
function move(){ 
if(arguments.length==1){ 
moveUp(arguments[0]); 
}else if(arguments.length==2){ 
moveRight(arguments[0],arguments[1]); 
} 
} 
function moveUp(direction){ 
if(currentSel == null) return; 
var index = currentSel.selectedIndex; 
if(direction){//up 
if(index==0) return; 

var value = currentSel.options[index-1].value; 
var text = currentSel.options[index-1].text; 

currentSel.options[index-1].value = currentSel.options[index].value; 
currentSel.options[index-1].text = currentSel.options[index].text; 

currentSel.options[index].value = value; 
currentSel.options[index].text = text; 

currentSel.options[index].selected = false; 
currentSel.options[index-1].selected = true; 
}else{//down 
if(index==(currentSel.length-1)) return; 

var value = currentSel.options[index+1].value; 
var text = currentSel.options[index+1].text; 

currentSel.options[index+1].value = currentSel.options[index].value; 
currentSel.options[index+1].text = currentSel.options[index].text; 

currentSel.options[index].value = value; 
currentSel.options[index].text = text; 

currentSel.options[index].selected = false; 
currentSel.options[index+1].selected = true; 
} 
} 
function moveRight(src,des){ 
if(src.selectedIndex==-1){ 
alert("Please select first!"); 
return; 
} 
for(var i=0;i<src.length;i++){ 
if(src[i].selected){ 
var op = document.createElement("option"); 
op.value = src.options[src.selectedIndex].value; 
op.text = src.options[src.selectedIndex].text; 
des.options.add(op); 
src.remove(i); 
i--; 
} 
} 
} 
function setButton(obj){ 
if(obj.length==0) return; 
currentSel = obj; 
if(obj.id=="leftSel"){ 
document.getElementById("btnLeft").disabled = true; 
document.getElementById("btnRight").disabled = false; 

reSelect(document.getElementById("rightSel")); 
}else{ 
document.getElementById("btnLeft").disabled = false; 
document.getElementById("btnRight").disabled = true; 

reSelect(document.getElementById("leftSel")); 
} 
} 

function reSelect(obj){ 
for(var i=0; i<obj.length; i++){ 
if(obj[i].selected) obj[i].selected = false; 
} 
} 
</script> 
</HEAD> 

<BODY> 
<form id="form1"> 
<table width="40%" align="center"> 
<tr> 
<td> 
<input type="button" value=" Up " id="btnUp" onClick="move(true);" style="width:65"/> 

 
<input type="button" value=" Down " id="btnDowm" onClick="move(false);" style="width:65" /> 
</td> 
<td> 
<select multiple id="leftSel" onclick="setButton(this)" style="height:200px;width:100px;"> 
<option value="1">Java</option> 
<option value="2">JavaScript</option> 
<option value="3">C++</option> 
<option value="4">HTML</option> 
</select> 
</td> 
<td> 
<input type="button" value=" >> " id="btnRight" onClick="move(document.getElementById('leftSel'),document.getElementById('rightSel'));" style="width:65" /> 

 
<input type="button" value=" << " id="btnLeft" onClick="move(document.getElementById('rightSel'),document.getElementById('leftSel'));" style="width:65" /> 
</td> 
<td> 
<select multiple id="rightSel" onclick="setButton(this)" style="height:200px;width:100px;" > 
<option value="5">CSS</option> 
<option value="6">.Net</option> 
</select> 
</td> 
</tr> 
</table> 
</form> 
</BODY> 
</HTML>
 
分享到：
| JavaScript 中 void(0) 的含义
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    select选择框内容左右移动

    本主题聚焦于如何实现`select`选择框内容的左右移动功能，这是一种增强用户体验的方式，尤其适用于需要用户在多个选项间频繁切换的场景。下面将详细探讨这一功能的实现原理、技术栈以及相关的编程知识点。 1. **...

    java Script ,jquery 写的 select 中的option 左右移动，上下移动

    对于左右移动，我们可以假设存在两个`&lt;select&gt;`元素，分别表示“左侧列表”和“右侧列表”。用户可以将“左侧列表”的选项移动到“右侧列表”，反之亦然。这涉及到从一个`&lt;select&gt;`中移除元素并将其添加到另一个`...

    关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题

    然而，在实际使用过程中，可能会遇到一些问题，比如Select下拉选项（el-option）在页面滚动时超出元素区域，以及Cascader级联选择器滚动超出其容器。这两个问题都会影响用户体验。本文将详细探讨这两个问题的原因及...

    select选择框内容左右移动添加删除.zip

    select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！

    基于jquery实现select选择框内容左右移动添加删除代码分享

    在本文中，我们将深入探讨如何使用jQuery库来实现一个功能丰富的select选择框，该功能允许用户将选项在两个select元素之间进行左右移动、添加和删除。这个功能在数据管理、选项筛选或用户自定义设置等场景中非常有用...

    怎么把select下拉菜单里的文字设置成左右滚动效果.docx

    在网页设计中，将`select`下拉菜单内的选项文字设置为左右滚动的效果通常涉及到JavaScript和CSS技术。这种效果在一些需要展示大量选项且空间有限的场景中非常有用。然而，`marquee`标签并不适用于`select`元素，因为...

    react-可视化操控左右多选select的React组件

    在React开发中，创建一个可视化操控的左右多选Select组件是一项常见的需求，特别是在构建复杂的用户界面时。这个组件允许用户通过直观的交互方式在两个选择框之间移动选项，从而实现多选功能。以下是对该React组件...

    js select 实现左右传值

    Js实现两个Select标签中的选项之间的移动

    select的左右移

    以上介绍了如何通过JavaScript实现`&lt;select&gt;`元素中选项的左右移动及上下移动。这些方法在实际开发中非常实用，尤其是在处理复杂的表单交互时。理解并掌握这些技术细节对于提高Web应用的用户体验具有重要意义。

    javascript 操作两个select，左右选择值。

    这个场景中，我们讨论的是如何实现一个功能，让用户可以在两个Select下拉框之间移动选择的值，这种功能常见于多选设置或者数据迁移的界面。下面我们将深入探讨如何实现这样的功能。 首先，我们需要两个HTML Select...

    js控制 select表单子节点左右上下移动

    当我们需要对这些下拉选项进行更复杂的交互，例如通过键盘控制选择项的上下左右移动时，就需要编写自定义的JavaScript代码来实现这样的功能。这篇博客“js控制 select表单子节点左右上下移动”提供了一个解决方案，...

    两个select 框的数据移动

    在某些交互式应用中，我们可能需要实现一个功能，让用户能够从一个`&lt;select&gt;`框（通常称为“源”或“左侧”框）选择一个或多个选项，然后将这些选项移动到另一个`&lt;select&gt;`框（“目标”或“右侧”框）。这种操作常见...

    jQuery实现Select左右复制移动内容

    总的来说，这个jQuery实现的Select左右复制移动内容提供了一个实用的交互方式，帮助用户更方便地管理他们的选择。同时，由于代码结构清晰，易于理解和扩展，因此在实际开发中具有很高的价值。希望这个介绍对你的项目...

    怎么把select下拉菜单里的文字设置成左右滚动效果

    在网页设计中，有时我们可能想要为特定元素添加动态效果以增强用户体验，比如将下拉菜单中的文字设置成左右滚动。然而，HTML 的 `&lt;select&gt;` 元素内嵌入 `&lt;marquee&gt;` 标签并不直接支持这样的效果，因为 `&lt;marquee&gt;` ...

    jquery改变select下拉控件，且有左右点击按钮

    本篇文章将详细讲解如何使用jQuery来改变一个`select`下拉控件，并添加左右点击按钮以实现选项切换的功能。这个功能在网页交互设计中常见，能提升用户体验，使用户更便捷地浏览和选择下拉列表中的项目。 首先，我们...

    jQuery双向列表左右移动选择框代码

    **jQuery双向列表左右移动选择框**是一种常见的交互设计，它允许用户在两个列表之间移动项目，通常用于选择或分配选项。这种设计广泛应用于各种应用程序，如设置管理、权限分配等。下面将详细介绍如何实现这样的功能...

    jquery双向选择器两侧select框列表文字左右选择器代码

    这段代码会在左侧select框的值改变时，将选定的选项移动到右侧select框，并从左侧移除。为了保持双向同步，我们也需要监听右侧select框的`change`事件： ```javascript $('select.right').on('change', function() ...

    jquery实现select选择框内容左右移动代码分享

    本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下： select选择框内容左右移动，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，运行效果图： 具体代码如下 &lt;!...

    JavaScript, select标签元素左右移动功能实现

    在JavaScript编程中，有时我们需要为HTML页面添加交互性功能，比如实现选择列表（select）元素的左右移动。这里，我们将详细探讨如何利用JavaScript实现这样的功能，特别是在处理select标签时的操作。 首先，我们要...

Magicbox
Global site tag (gtag.js) - Google Analytics