webapi下拉菜单选择

最新推荐文章于 2021-09-07 18:14:35 发布

黄桃乳酪派

最新推荐文章于 2021-09-07 18:14:35 发布

阅读量145

点赞数

分类专栏： JavaScript 文章标签： js html5 web

本文链接：https://blog.csdn.net/u012271799/article/details/115910042

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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;">&gt;&gt;</a></p>
          <p><a href="#" style="padding-left: 20px;">&gt;&gt;&gt;</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="#">&lt;&lt;</a></p>
          <p><a href="#">&lt;&lt;&lt;</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>

黄桃乳酪派

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webapi下拉菜单选择

<!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
复制链接

扫一扫