删除下拉列表中的选项
程序员文章站
2022-04-10 11:52:19
...
一 介绍
删除下拉列表中的单个选项可以用select对象的remove()、focus()方法和selectedIndex属性来实现。
1、remove()方法
该方法用于在下拉列表中删除指定的option对象。
myselect.remove(index)
myselect:当前要删除选项的select对象的名称。
index:要删除的option对象的下标。
例如,删除myselect下拉列表中的第2个选项。代码如下:
myselect.remove(1)
2、focus ()方法
该方法将焦点移到当前对象上。
myselect.focus()
3、selectedIndex属性
该属性用于获取select对象中当前被选中的option对象的下标。
n=myselect.selectedIndex
n:存储当前被选中的option对象的下标值。当没有选中option对象时,该属性的值为-1。
二 应用
本应用自动在滚动列表中选中第一个选项,然后单击“删除”按钮将其删除,用户也可以通过鼠标选中指定的选项进行删除。
三 代码
<form name="form1" method="post" action=""> <select style="width:100px " name="select1" size="4" multiple> <option value="1">第一</option> <option value="2">第二</option> <option value="3">第三</option> <option value="4">第四</option> </select> <input type="button" name="Button" value="删除" onclick="selectDelete(document.form1.select1,this)"> </form> <script language="javascript"> <!-- function selectDelete(sname,bname) //该方法用于删除当前被选中的选项 { if (sname.length>0) { if (sname.selectedIndex>=0) sname.remove(sname.selectedIndex); if (sname.length==0) bname.disabled=true; } selectfocus(document.form1.select1); } function selectfocus(sname) //该方法用于选中select对象中的第一个选项 { if (sname.length>0) { sname.focus(); sname.options[0].selected=true; //使滚动列表中的第一个选项为选中状态 } } selectfocus(document.form1.select1) //页面加载后自动调用selectfocus()方法 //--> </script>
四 运行效果
上一篇: 微信小程序实现图片轮播及文件上传