WEB开发网
开发学院网页设计JavaScript Javascript - Select操作大集合 阅读

Javascript - Select操作大集合

 2010-09-14 13:18:56 来源:WEB开发网   
核心提示: if 里的代码也可用下面几句代码代替var op = from.options[i];to.options.add(new Option(op.text, op.value));from.remove(i);4、Select里Option的上下移动function fnUp(){var s

if 里的代码也可用下面几句代码代替

 var op = from.options[i];
 to.options.add(new Option(op.text, op.value));
 from.remove(i);

4、Select里Option的上下移动

    function fnUp()
    { 
      var sel = document.getElementById("selID");
      for(var i=1; i < sel.length; i++)
      {//最上面的一个不需要移动,所以直接从i=1开始
        if(sel.options[i].selected)
        {
          if(!sel.options.item(i-1).selected)
          {//上面的一项没选中,上下交换
             var selText = sel.options[i].text;
             var selValue = sel.options[i].value;
             sel.options[i].text = sel.options[i-1].text;
             sel.options[i].value = sel.options[i-1].value;
             sel.options[i].selected = false;
             sel.options[i-1].text = selText;
             sel.options[i-1].value = selValue;
             sel.options[i-1].selected=true;
          }
        }
      }
    }

在进行上下两项互换时,也可以使用以下代码,但是效率很低,因为每一次的Dom操作都将导致整个页面的重新布局,所以不如直接修改元素的属性值。

            var oOption = sel.options[i]
            var oPrevOption = sel.options[i-1]
            sel.insertBefore(oOption,oPrevOption);向下移动同理
function fnDown()
    {
      var sel = fnGetTarget("selLeftOrRight");
      for(var i=sel.length -2; i >= 0; i--)
      {//向下移动,最后一个不需要处理,所以直接从倒数第二个开始
        if(sel.options.item(i).selected)
        {
          if(!sel.options.item(i+1).selected)
          {//下面的Option没选中,上下互换
             var selText = sel.options.item(i).text;
             var selValue = sel.options.item(i).value;
             sel.options.item(i).text = sel.options.item(i+1).text;
             sel.options.item(i).value = sel.options.item(i+1).value;
             sel.options.item(i).selected = false;
             sel.options.item(i+1).text = selText;
             sel.options.item(i+1).value = selValue;
             sel.options.item(i+1).selected=true;
          }
        }
      }
    }
5、Select里Option的排序

Tags:Javascript Select 操作

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接