通过JavaScript操作HTML中select标签

最新推荐文章于 2022-12-17 16:08:21 发布

原创最新推荐文章于 2022-12-17 16:08:21 发布 · 976 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #null #function

Web开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript操作HTML中的Select元素，包括添加、删除选项及获取选中项的值。提供了详细的代码示例，帮助读者理解如何动态管理下拉列表。

添加：

Js代码

function selectChange()
{
var sel=document.getElementById("select1");
Option option = new Option("Text","Value");
sel.add(option);
}

function selectChange()
{
      var sel=document.getElementById("select1");
      Option  option = new Option("Text","Value");
      sel.add(option);
}

删除所有：

Js代码

document.getElementById("select1").options.length=0;

         document.getElementById("select1").options.length=0;

删除单个Option元素：

Js代码

var sel=document.getElementById("select1");
for(i=0;i<sel.options.length;i++)
{
if(sel.options[i].selected)
{
sel.options[i]=null; //设置为null就删除了这个元素
}
}

var sel=document.getElementById("select1");
for(i=0;i<sel.options.length;i++)   
{   
     if(sel.options[i].selected)   
    {   
            sel.options[i]=null;       //设置为null就删除了这个元素
    }   
}

取值：

Js代码

var sel=document.getElementById("select1"):
var val=sel.options[sel.selectedIndex].value
alert(val); //得到Option的value
var txt=sel.options[sel.selectedIndex].text
alert(txt); //得到Option的文本（即Text）

var sel=document.getElementById("select1"):
var val=sel.options[sel.selectedIndex].value 
alert(val);  //得到Option的value 
var txt=sel.options[sel.selectedIndex].text 
alert(txt);  //得到Option的文本（即Text）