JS练习：商品的左右选择

代码：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>商品的左右选择</title><!--步骤分析1. 确定事件: 点击事件 :onclick事件2. 事件要触发函数 selectOne3. selectOne要做一些操作(将左边选中的元素移动到右边的select中)1. 获取左边Select中被选中的元素2. 将选中的元素添加到右边的Select中即可--><script>function selectOne() {//1. 获取左边Select中被选中的元素var leftSelect = document.getElementById("leftSelect");var options = leftSelect.options;//找到右侧的Selectvar rightSelect = document.getElementById("rightSelect");//遍历找出被选中的optionfor (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;//找到右侧的Selectvar rightSelect = document.getElementById("rightSelect");//遍历找出被选中的optionfor (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>vivo</option><option>oppo</option></select><br/><a href="#" onclick="selectOne()"> &gt;&gt; </a> <br/><a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a></div><!--右边--><div style="float: right;">未有商品<br/><select multiple="multiple" id="rightSelect"><option>苹果5</option><option>苹果6</option><option>苹果7</option><option>苹果8</option></select><br/><a href="#"> &lt;&lt; </a> <br/><a href="#"> &lt;&lt;&lt; </a></div></td></tr><tr><td colspan="2"><input type="submit" value="提交"/></td></tr>
</table>
</body>
</html>

View Code

转载于:https://www.cnblogs.com/believepd/p/10012712.html

JS练习：商品的左右选择相关推荐

微信小程序实战篇：商品属性联动选择（案例）
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...
淘淘商城第24讲——实现商品类目的选择
教员讲过:"会当水击三千里,自信人生两百年".当我们实现商品列表查询这个功能之后,我相信大家都信心倍增,但这只是走完万里长征的第一步,后面还有嵩山峻岭等着我们去攀登,所以千万不可懈 ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
js鼠标略过自动选择当前行
js鼠标略过自动选择当前行效果图: 相关代码: <!DOCTYPE html> <html><head><meta charset="utf-8& ...
[js] 请使用js实现商品的自由组合，并说说你的思路
[js] 请使用js实现商品的自由组合,并说说你的思路 <!DOCTYPE html> <html lang="en"><head><me ...
vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
js排序算法详解-选择排序
全栈工程师开发手册 (作者:栾鹏) js系列教程5-数据结构和算法全解 js排序算法详解-选择排序相对于冒泡排序还有一种类似的方法就是选择排序,顾名思义就是选择性排序,什么意思呢? 这么来理解,假设 ...
html css工资条样式,JS+CSS3交互式拖动滑块选择工资条代码
一款JS+CSS3交互式拖动滑块选择工资条代码,可以托工工资下面的滑块来实时改变工资的数值大小,除了数字变化的同时还有一个颜色的平滑变化,当数值到最大值时,有一个文字的摆动动画特效. 查看演示下载资 ...
仿淘宝京东商品规格属性选择的最简单实现
仿淘宝京东商品规格属性选择的最简单实现商城里面的规格选择,网上大部分是自定义控件实现的,显得很是麻烦,而我的实现方式是大家最常用的控件RecyclerView,特点是性能好,简单.废话不多说,先看实 ...

JS练习：商品的左右选择

JS练习：商品的左右选择相关推荐

最新文章

热门文章