基于JavaScript实现控制下拉列表
作者：朱李洛克 发布时间：2024-11-16 14:08:48
标签：JavaScript,控制,下拉,列表
需求分析
在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品
技术分析
ondblclick="selectOne()"：双击事件
select标签的属性multiple="multiple"：
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步骤分析
1. 确定事件: 点击事件 :onclick事件
2. 事件要触发函数 selectOne
3. selectOne要做一些操作
(将左边选中的元素移动到右边的select中)
1. 获取左边Select中被选中的元素
2. 将选中的元素添加到右边的Select中就可以
-->
<script>
function selectOne(){
//1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=0; i < options.length; i++){
var option1 = options[i];
if(option1.selected){
//2. 将选中的元素添加到右边的Select中就可以
rightSelect.appendChild(option1);
}
}
}
//将左边所有的商品移动到右边
function selectAll(){
//1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右侧的Select
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=options.length - 1; i >=0; i--){
var option1 = options[i];
rightSelect.appendChild(option1);
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="selectOne()"> >> </a> <br />
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="selectAll()"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果6</option>
<option>肾7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > << </a> <br />
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
来源：https://www.cnblogs.com/zllk/p/12833997.html
0
投稿猜你喜欢
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&q
本文实例讲述了Python文本统计功能之西游记用字统计操作。分享给大家供大家参考，具体如下：一、数据xyj.txt，《西游记》的文本，2.2- 很有创意的鼠标指针风筝，看起来非常有意思。在网络上看到的，一下也想不起来是那里的了，所以特别说一下图片是来自网络的，版权归作者所有。
- 最近想尝试一下在IBM Bluemix上使用Python语言创建Web应用程序，所以需要在本地搭建Python Web的开发测试环境。关于P
- 1. 引言今天来给小伙伴推荐两款实用的便于调试Python代码的工具，可以方便展示我们调试代码的中间状态，提升大家的编码效率。2. 动机在日
- 1.背景在python运行一些，计算复杂度比较高的函数时，服务器端单核CPU的情况比较耗时，因此需要多CPU使用多进程加快速度2.函数要求笔
- 在CSS布局中，ul，li的运用是非常常见的。配合DIV与CSS，创建无表格布局。 其实Dreamweaver中也有自带的CSS布局的范例，
- 接上章《pygame实现俄罗斯方块游戏（基础篇1）》继续写俄罗斯方块游戏五、计算方块之间的碰撞在Panel类里增加函数def check_o
- 建议用pycharm，使用比较方便，并且可以直接编辑html文件import timelocatime = time.strftime(&q
- 通过python的os模块获取windows或者linux主机名的通用函数。#!/usr/bin/env python #cod
- 看到Python中有个函数名比较奇特,__init__我知道加下划线的函数会自动运行,但是不知道它存在的具体意义..Python中所有的类成
- 一、题意理解给定两棵树T1和T2。如果T1可以通过若干次左右孩子互换就变成T2，则我们称两棵树是“同构的”。现给定两棵树，请你判断它们是否是
- 如何创建列表，或生成列表。这里介绍在python的基础知识里创建或转变或生成列表的一些方法。零个，一个或一系列数据用逗号隔开，放在方括号[
- 一、什么是异常？异常即是一个事件，该事件会在程序执行过程中发生，影响了程序的正常执行。一般情况下，在Python无法正常处理程序时就会发生一
- 通过HTTP_USER_AGENT判断用户是从手机上访问，还是电脑IE上访问。 asp代码片段：主要使用了正则匹配手机环境，大家可以补充手机
- python中一切皆为对象，所谓对象：我自己就是一个对象，我玩的电脑就是对象，坐着的椅子就是对象，家里养的小狗也是一个对象。。。。。。我们通
- 我们知道 Golang 切片（slice） 在容量不足的情况下会进行扩容，扩容的原理是怎样的呢？是不是每次扩一倍？下面我们结合源码来告诉你答
- 本游戏程序实现的功能为本地二人对弈中国象棋，实现语言为javascript+VML，在windows 2000 pro+IE 6sp1的环境
- while循环只要循环条件为True（以下例子为x > y），while循环就会一直 执行下去：u, v, x, y = 0, 0,
- 使用自带的函数就可以实现：lineEdit.setEchoMode(QLineEdit.Password)import structfrom
