案例权限的选择

这次我们要学习的案例是权限的选择;

首先把案例所需要的元素布局设置好然后给予所需元素id名;

<div style="margin-left: 500px; margin-top: 20px; background-color: #999999">

  <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se1">

    <option>添加</option>

    <option>删除</option>

    <option>修改</option>

    <option>查询</option>

    <option>打印</option>

  </select>

  <div style="width: 50px; float: left;">

    <input type="button" name="name" value=">" style="width: 50px;" id="toRight"/>

    <input type="button" name="name" value="<" style="width: 50px;" id="toLeft"/>

    <input type="button" name="name" value=">>" style="width: 50px;" id="toAllRight"/>

    <input type="button" name="name" value="<<" style="width: 50px;" id="toAllLeft"/>

  </div>

  <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se2">

  </select>

</div>

带入jQuery插件

<script src="jquery-1.12.2.js"></script>

接下来写上页面加载事件给每一个按钮写上点击事件若点击前该元素在#se1时则转到#se2;则从#se2转到#se1;

<script>

      $(function(){

          // 第一个按钮

          $("#toRight").click(function(){

              $("#se1>option:selected").appendTo($("#se2"));

          });

          // 第二个按钮

          $("#toLeft").click(function(){

              $("#se2>option:selected").appendTo($("#se1"));

          });

          // 第三个按钮

          $("#toAllRight").click(function(){

              $("#se1>option").appendTo($("#se2"));

          });

          // 第四个按钮

          $("#toAllLeft").click(function(){

              $("#se2>option").appendTo($("#se1"));

          });

      });

  </script>

总结:此案例用到的关键技术是jQuery关键的知识点是.appendTo();注意: appendTo()意思是将文本从此文本框转移到另一个文本框内;

这是我所学到的JavaScript案例，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！