<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="600" align="center">
<tr>
<td>
分类名称
</td>
<td>
<input type="text" name="cname" value="手机数码" />
</td>
</tr>
<tr>
<td>
分类描述
</td>
<td>
<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
</td>
</tr>
<tr>
<td>
分类商品
</td>
<td>
<span style="float: left;">
<font color="green" face="宋体">已有商品</font><br />
<select multiple="multiple" style="width: 100px;height: 200px;">
<option>IPhone6s</option>
<option>小米4</option>
<option>锤子T2</option>
</select>
<p><a href="#" style="padding-left: 20px;">>></a></p>
<p><a href="#" style="padding-left: 20px;">>>></a></p>
</span>
<span style="float: right;">
<font color="red" face="宋体">未有商品</font><br />
<select multiple="multiple" style="width: 100px;height: 200px;">
<option>三星Note3</option>
<option>华为6s</option>
</select>
<p><a href="#"><<</a></p>
<p><a href="#"><<<</a></p>
</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type='submit' value="修改" />
</td>
</tr>
</table>
<script>
let a = document.querySelectorAll('a')
let select1 = document.querySelectorAll('select')[0]
let select2 = document.querySelectorAll('select')[1]
// 定义空变量保存两个select的下标
let index1;
let index2;
// 已有商品
// 选择option元素后点击删除
a[0].addEventListener('click', function () {
// 获取选择的元素的下标
index1 = select1.selectedIndex
// 往未有商品盒子里追加元素
select2.appendChild(select1.children[index1])
// 删除选择的元素
select1.children[index1].innerHTML.remove()
})
// 全部切换
a[1].addEventListener('click', function () {
// 往未有商品盒子里添加已有商品的元素
select2.innerHTML += select1.innerHTML;
// 清空已有商品盒子
select1.innerHTML = ''
})
// 未有商品
// 选择option元素后点击删除
a[2].addEventListener('click', function () {
// 获取选择的元素的下标
index2 = select2.selectedIndex
// 往已有商品盒子里追加元素
select1.appendChild(select2.children[index2])
// 删除选择的元素
select2.children[index2].innerHTML.remove()
})
// 全部切换
a[3].addEventListener('click', function () {
// 往已有商品盒子里添加未有商品的元素
select1.innerHTML += select2.innerHTML;
// 清空已有商品盒子
select2.innerHTML = ''
})
</script>
</body>
</html>
webapi下拉菜单选择
最新推荐文章于 2022-12-21 13:46:41 发布