<html>
<head>
<title></title>
<script language="javascript">
//添加选项到最后
function AddOption(selectBall){
//获得下拉菜单对象
var objSelect=document.forms["myForm1"].elements[selectBall];
//获得要添加的内容
var txtIn=document.getElementById("txtInput").value;
//生成列表选项
var objOption=new Option(txtIn,"newAdd");
//利用select的第length项设置为新选项，即添加到末尾?
objSelect.options[objSelect.options.length]=objOption;
}
//添加选项到选中位置之前
function AddOptionDefinedPosition(selectBall){
//获得下拉菜单对象
var objSelect=document.forms["myForm1"].elements[selectBall];
//获得要添加的内容
var txtIn=document.getElementById("txtInput").value;
//生成列表选项
var objOption=new Option(txtIn,"newAdd");
//alert(objSelect.selectedIndex);
//如果没有项目选中则selectedIndex返回-1
if(objSelect.selectedIndex==-1)
{
//利用select的第length项设置为新选项，即添加到末尾?
objSelect.options[objSelect.options.length]=objOption;
}
else
{
//为了兼容ie7，先添加到最后，再移动
objSelect.options[objSelect.options.length]=objOption;
//用insertBefore移动到相应位置
objSelect.insertBefore(objOption,objSelect.options[objSelect.selectedIndex]);
}
}
//删除选项
function RemoveOption(selectBall){
//获得下拉菜单对象
var objSelect=document.forms["myForm1"].elements[selectBall];
//获得要删除的下表
var indexDelete=objSelect.selectedIndex;
//如果选中，把这个选项设置为null就删除了
if (indexDelete>-1)
objSelect.options[indexDelete]=null;
}
</script>
</head>
<body>
<form method="post" name="myForm1">
<select id="ball" name="ball" multiple="multiple">
<option value="Football">足球</option>
<option value="Basketball">篮球</option>
<option value="Volleyball">排球</option>
</select>
<br>
<input type="text" id="txtInput"/>
<input type="button" value="添加" onclick="AddOption('ball');" />
<input type="button" value="添加到具体位置" onclick="AddOptionDefinedPosition('ball');" />
<input type="button" value="删除" onclick="RemoveOption('ball');" />
</form>
</body>
</html>
扫一扫
2652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
