JavaScript贯彻select增添option

JavaScript为select添加option

本文实例讲述了JS实现Select的option上下移动的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试文件</title>
<script>
window.onload = function(){
  //创建select控件
  var _select = document.createElement("SELECT");

  //添加选项
  for(var i=1; i<=10; i++){
    var _option = new Option(i,i);
    _select.options.add(_option);
  }

  //选中值发生改变时的处理函数
  _select.onchange = function(){
    alert(_select.value); //取select控件被选中的值
  }

  document.body.appendChild(_select);
}
</script>
</head>

<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function UpOrDown(direct, selectId) {//direct : 1:Up, -1:Down
 var obj = document.getElementById(selectId);
 var len = obj.length;
 var index = obj.selectedIndex;
 //如果:1.没有选中的项; 2.向上,但已是最上; 3.向下,但是最下,不作处理
 if ( (index == -1) || (direct == -1 && index == 0) || (direct == 1 && index >= len - 1) )
  return;
 var swapIndex = index + direct;
 var tempOptions = new Array();
 for (var i = 0; i < len; i++){
  tempOptions[tempOptions.length] = obj.options[i == index?swapIndex:(i == swapIndex?index:i)];
 }
 obj.options.length = 0;
 for (var i = 0; i < len; i++)
  obj.options.add(tempOptions[i]);
}
function UpOrDown2(direct, selectId) {//direct : 1:Up, 0:Down
 var obj = document.getElementById(selectId);
 var len = obj.length;
 var index = obj.selectedIndex;
 //如果:1.没有选中的项; 2.向上,但已是最上; 3.向下,但是最下,不作处理
 if( (index == -1) || (direct == 1 && index == 0) || (direct == 0 && index >= len - 1) )
  return;
 var tempOptions = new Array();
 //如是向上,得到自己上一个到最后的option数组;如是向下,得到自己到最后一个的option数组
 for (var i = index - direct; i < len; i++)
  tempOptions[tempOptions.length] = obj.options[i];
 //去除刚才取得的部分
 obj.options.length = index - direct;
 //颠倒取两个option
 obj.options.add(tempOptions[1]);
 obj.options.add(tempOptions[0]);
 //将余下的option全部加进来
 for (var i = 2; i < tempOptions.length; i++)
  obj.options.add(tempOptions[i]);
}
</script>
</head>
<body>
 <table>
  <tr>
   <td>
    <select id="Select1" size="100" style="width:100px;height:200px;">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
     <option>5</option>
    </select>
   </td>
   <td>
    <img id="imgUp" alt="Up" onclick="UpOrDown(-1,'Select1')" style="cursor:pointer;" /><br />
    <img id="imgDown" alt="Down" onclick="UpOrDown(1,'Select1')" style="cursor:pointer;" />
   </td>
   <td>
    <img id="img1" alt="Up2" onclick="UpOrDown2(1,'Select1')" style="cursor:pointer;" /><br />
    <img id="img2" alt="Down2" onclick="UpOrDown2(0,'Select1')" style="cursor:pointer;" />
   </td>
  </tr>
 </table>
</body>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

您可能感兴趣的文章:

  • JS 通过系统时间限定动态添加 select
    option的实例代码
  • JS & JQuery 动态添加 select
    option
  • JS实现Select的option上下移动的方法
  • JavaScript操作select元素和option的实例代码
  • JS更改select内option属性的方法
  • js给selected添加options的方法
  • js添加select下默认的option的value和text的方法
  • jquery根据一个值来选中select下的option实例代码

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

  • JS 通过系统时间限定动态添加 select
    option的实例代码
  • JS & JQuery 动态添加 select
    option
  • JavaScript操作select元素和option的实例代码
  • JS更改select内option属性的方法
  • JavaScript实现select添加option
  • js给selected添加options的方法
  • js添加select下默认的option的value和text的方法
  • jquery根据一个值来选中select下的option实例代码

相关文章