js操作SELECT对象

<html>
<head>
<title>js操作select实例</title>
</head>
<script>
/*主要介绍js动态操作select各种方法,也可以实现左右分栏的功能*/
  /
  function removeItem(sel_source)
  {
    var selobj=document.getElementById("yixuan");
var i=0;
var length = selobj.options.length;
while(i<length)
{
   var op = selobj.options[i];
   var index =op.index;
   alert(op.innerHTML)
   if(op.selected)
   {
      //document.getElementById("yixuan").options.remove(index);
  //op.remove();
  i--;
   }
   i++;
   length = selobj.options.length;
}
  }
/*添加option属性*/
function add()
{
     var selobj=document.getElementById("yixuan");
var varItem = new Option("123","yierdan"); /*显示值、真实值*/
selobj.options.add(varItem); 
}
/*清空select中的数据*/
function qingkong()
{
    var selobj=document.getElementById("yixuan");
selobj.options.length=0;
}
</script>
</head>
<body>
<input type="button" value="添加" onclick="add()">
<input type="button" value="移除" onclick="removeItem(yixuan)">
<input type="button" value="清空" onclick="qingkong(yixuan)">
<select name="yixuan" id="yixuan" multiple style="width:300;height:600">
<option value="1">数据1</option>
<option value="2">数据2</option>
<option value="3">数据3</option>
<option value="4">数据4</option>
<option value="5">数据5</option>
</select>
</body>
</html>

你可能感兴趣的:(JavaScript)