js操作SELECT对象

最新推荐文章于 2019-03-04 10:02:00 发布

原创最新推荐文章于 2019-03-04 10:02:00 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

随手笔记专栏收录该内容

25 篇文章

订阅专栏

<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>