ListBox中的SelectedItem上下移动

最新推荐文章于 2026-02-13 00:28:27 发布

原创最新推荐文章于 2026-02-13 00:28:27 发布 · 626 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#button #javascript #up

收录于

本文介绍了一种使用HTML和JavaScript实现下拉菜单选项上下移动及排序的方法。通过按钮触发事件，可以方便地调整下拉框中选项的位置，适用于表单制作和其他需要定制化排序的应用场景。

<form   name="form1">   
    <select   name="sel1"   size="4">   
      <option   value="1">1</option>   
      <option   value="2">2</option>   
      <option   value="3">3</option>   
      <option   value="4">4</option>   
    </select>   
    <input   type="button"   value="up"   onclick="moveOption(-1)">   
    <input   type="button"   value="down"   onclick="moveOptio(1)">   
</form>  
 <script   language="javascript">   
  function   moveOption(nDirection)   
  {   
      var   select   =   document.form1.sel1;   
      var   nFrom   =   select.selectedIndex;     
      if   (nFrom>=0)   
      {   
          var   nTo   =   nFrom;   
          if   (nDirection   >   0)   
          nTo++;   
          else   if   (nDirection   <   0)   
          nTo--;   
            
          if   (nTo   !=   nFrom   &&   nTo   >=0   &&   nTo   <select.length)   
          {   
          select.options[nTo].swapNode(select.options[nFrom]);   
          }      
      }   
  }   
  </script>