JavaScript添加和删除select下拉项

快乐打工仔 分类:实例代码

JavaScript添加和删除select下拉项属于前端实例代码,有关更多实例代码大家可以查看

select下拉菜单在网页中非常的常用,有时需要根据特定情况,对select下拉菜单进行动态的操作。

下面就简单介绍一下相关内容,希望能够给大家带来一定的帮助。

一.动态创建一个select下拉菜单:

var theSelect=document.createElement("select"); 
theSelect.id="newId"; 
document.body.appendChild(theSelect);

以上代码创建了一个select下拉菜单对象,并且设置id属性值。

二.为下拉菜单添加option选项:

//theSelect.add(new Option("文本","值")); //在IE中有效 
theSelect.options.add(new Option("text","value")); //兼容所有主流浏览器

以上代码可以为select下拉菜单添加下拉选项,要注意浏览器兼容性问题。

三.删除一个option项:

var index=theSelect.selectedIndex; 
theSelect.options.remove(index);

以上代码可以删除当前被选项。remove()的参数可以是任意选项的索引,索引值从0开始的。

四.删除所有选项:

theSelect.options.length=0;

将选项的的长度设置为0即可。

JavaScript添加和删除select下拉项,这样的场景在实际项目中还是用的比较多的,关于JavaScript添加和删除select下拉项就介绍到这了。

回复

我来回复
  • 暂无回复内容