列表项左右移动

最新推荐文章于 2022-05-30 17:11:48 发布
最新推荐文章于 2022-05-30 17:11:48 发布
阅读量137 收藏
点赞数
分类专栏： java 应用 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hason3417509/article/details/84227671
版权
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript强化训练－－下拉列表的操作01</title>
<script language="JavaScript" type="text/javascript">

//移动下拉框被选中选项
//fromSelId :源下拉框id
//toSelId :目标下拉框id
function moveOption(fromSelId,toSelId){
var fromSel = document.getElementById(fromSelId);
var toSel = document.getElementById(toSelId);

if(fromSel==null||toSel==null){
return false;
}

for(var i = 0;i < fromSel.options.length;i++){
var _option = fromSel.options[i];
//是否选中
if(_option.selected){
//往目标下拉框加添加选项
toSel.appendChild(_option);
i--;
}
}
}

</script>
</head>

<body bgcolor="abcdef">
<form id='demoFrm' name="demoFrm" method="post" action="" >

<table border="1" align="center" width="300">
<tr>
<td colspan="3" align="center">下拉列表操作的演示</td>
</tr>
<tr>
<td align="center" width="100">
<select multiple="multiple" size="10" id="leftSel">
<option value="1">第一个理拉框的值1</option>
<option value="2">第一个理拉框的值2</option>
<option value="3">第一个理拉框的值3</option>
<option value="4">第一个理拉框的值4</option>
</select>
</td>
<td align="center" width="100">
<input type="button" id="moveTwo" value="-->>" οnclick="moveOption('leftSel','rightSel');">
<br>
<input type="button" id="moveOne" value="<<--" οnclick="moveOption('rightSel','leftSel');">
</td>
<td align="center" width="100">
<select multiple="multiple" size="10" id="rightSel">
<option value="1">第二个理拉框的值1</option>
<option value="2">第二个理拉框的值2</option>
<option value="3">第二个理拉框的值3</option>
<option value="4">第二个理拉框的值4</option>
</select>
</td>
</tr>
</table>

</form>

<div id="showContent" style="font-size:30px;">
</div>
</body>
</html>
hason3417509
关注
专栏目录
js 下拉列表框操作
03-19 383
js下拉列表框分为两种，一种是 加载时就添加生成，另一种是根据其他的下拉列表框的联动 测试环境，一个表单，2个select框 --选择省份-- --选择城市-- 1.首先 定义数组 var cityList = new Array(); cityList['北京市'] = ['北京市','朝阳区','东城区','西城区', '海淀区','宣武区','丰台区
javascript自定义下拉框
12-12
很好用的一款插件，针对于自己定义的下拉列表
JS下拉列表，漂亮的下拉列表（javascript）
03-11
不多说，支持所有主流浏览器，支持列表搜索功能，宽高自适应等，样式独立，可随心更改，内含示例，解压即可运行看效果。绝对是你想要的！如果有什么意见或建议，请留言。thanks!
javascript对下拉列表框(select)的操作
龙的天空
08-02 3467
这篇文章，主要是关于javascript和select相关的最基本方法，以供不熟悉javascript的人参考。常见的情况是，提出表单结构的人， 不仅仅需要为程序设计逻辑，创建数据结构，还需要设计表单的样式，以及熟悉javascript；某些公司可能会要求您精通photoshop：最初的时 候，我们都是全才。 下面是我们例子的基础；这不是一个标准的表单。 asp学习网 百度 -------
js下拉列表框操作总结
Android Fans
08-14 286
&lt;!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;JavaScript强化训练－－下拉列表的操作01&lt;/title&gt; &lt;script language="JavaScript" type=&quot
JavaScript 下拉列表框
抛弃幻想，准备斗争
10-20 4679
<!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function showCity(city){ ...
javascript 操作下拉框
低调
06-17 226
1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); }2.添加选项option
JavaScript Select和Option列表元素上下左右移动
10-30
JavaScript Select和Option列表元素上下左右移动 在这个资源中，我们将要讨论如何使用 JavaScript 实现 Select 和 Option 列表元素的上下左右移动功能。这个功能支持一次选中多项在左右列表中来回移动，非常适合在...
jQuery实现可移动选项的左右下拉列表示例
10-20
在本文中，我们将深入探讨如何使用jQuery来实现一个可移动选项的左右下拉列表。这个功能常见于数据筛选或配置界面，用户可以通过拖动选项在两个下拉列表之间进行转移，以实现不同的设置或筛选条件。 首先，让我们...
jQuery双向列表左右移动选择框代码
06-10
**jQuery双向列表左右移动选择框**是一种常见的交互设计，它允许用户在两个列表之间移动项目，通常用于选择或分配选项。这种设计广泛应用于各种应用程序，如设置管理、权限分配等。下面将详细介绍如何实现这样的功能...
jQuery实现左右两个列表框的内容相互移动功能示例
10-17
在jQuery脚本中，通过id选择器 "#leftSelect" 和 "#rightSelect" 选取左右两边的列表框，通过点击事件触发器来实现列表项的移动。 4. jQuery事件响应机制： 通过绑定点击（click）事件，当点击不同的按钮时，会触发...
javascript 操作select下拉列表框的一点小经验
12-03
按照我一贯的web开发风格，所有不直接操作数据库的事件，都尽可能由javascript来实现，所以这个需求我打算使用js来完成。 首先来分析一下具体情况：这个页面是一个更新页面，品牌有品牌1和品牌2两个字段，品牌2可以为空，品牌1不能为空，所以品牌2的下拉列表框比品牌1多一项；如果选择了品牌的前8相中的任意一项，“活跃状态”要隐藏，否则“活跃状态”默认显示状态为“潜在”；当查询的结果品牌1和品牌2有任意一项在品牌的前8相中，“活跃状态”也要隐藏，否则“活跃状态”默认显示状态为“潜在”。 页面部分内容 代码如下: <div id=”div_Brand_Baby” name=”div_Brand
javascript对下拉列表框(select)的操作实例讲解
10-26
主要介绍了javascript对下拉列表框(select)的操作。需要的朋友可以过来参考下，希望对大家有所帮助
javascript实现下拉菜单
05-07
使用jquery实现的下拉菜单具有缓慢弹出等特效
js的下拉列表
m0_68843146的博客
05-30 1626
核心原理：将下拉的内容隐藏、再通过js来改变display属性（鼠标经过时的事件并且要配合使用排他思想、鼠标离开时要重新显示为隐藏状态） .bh3的意思就是当鼠标经过时导航内容变底色为橙色、是一个class Name的使用 ...
js实现下拉框
weixin_30530523的博客
05-12 229
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; ...
JavaScript的一些下拉列表框用法
二木成林
10-20 1397
效果展示 源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>设置下拉列表框的列表项</title> </head> <body> <div> <select name="com...
javascript 之 select下拉框
zhi1991的博客
07-12 131
[b]1.动态创建select[/b] function createSelect(){ var mySelect = document.createElement(select); mySelect.id = mySelect; document.body.appendChild(mySelect); } ...
JavaScript下拉列表的实现
编程的牛牛
10-04 2532
这一次写了一个比较简单的下拉列表的实现，点击出现列表内容，再次点击列表消失，研究了很久，发现这种js写法确实比较好用。先看一下效果。 直接上代码，js是主要写的部分，css是随意调试的，不过这个写法要用到css。 1、HTML部分的代码 <body> <!--最外面的一层--> <div class="outer"> <!-- 里面的--> <div class="inner"> <h2>第一</h2> &l
jQuery实现左右移动选项的下拉列表教程
"jQuery实现可移动选项的左右下拉列表示例，涉及表格与页面元素动态操作技术。" 在Web开发中，用户交互是提升用户体验的关键因素之一。jQuery作为一个强大的JavaScript库，提供了丰富的功能用于简化DOM操作、事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值