JavaScript实现下拉列表选中指定值的三种方法

作者:微光

时间:2026-10-29

浏览:325

本文介绍了在JavaScript中实现下拉列表选中指定值的三种常用方法。包括通过options数组索引设置selected属性、直接操作selectedIndex属性,以及通过value属性赋值。文章提供了具体的HTML与JS代码示例,分别演示了表单内外及不同表单结构下的操作方式,帮助开发者快速掌握相关技巧。

文章目录

JavaScript实现下拉列表选中值的三种方法

本文详细讲解了使用JavaScript实现下拉列表选中特定值的几种实现方案,供读者参考学习。

方法一:通过options数组设置selected属性

第一种方法:


<select id="aa">
<option>1</option>
<option>2</option>
</select>
<input type="button" value=" 选中" onclick="checkOption()" />
<script language="javascript" type="text/javascript" >
function checkOption()
{
 document.getElementById("aa").options[1].selected = true;
 alert("选中了2");
}
</script>

方法二:通过selectedIndex属性直接赋值

第二种方法:

假设存在如下结构的下拉列表:


<select name="" >
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
.......

针对未包含在表单内的下拉列表控件mycombo进行选中操作:


document.all( "mycombo ").selectedIndex=2 // 成功选中“苹果”这一项
mycombo.selectedIndex=2 // 成功选中“苹果”这一项 
document.mycombo.selectedIndex=2 // 失败 

针对包含在表单myform内部的下拉列表控件combo2进行选中操作:


document.all( "combo2 ").selectedIndex=2 // 成功选中“买水果”这一项
myform.combo2.selectedIndex=2 // 成功选中“买水果”这一项 
document.myform.combo2.selectedIndex=2 // 成功选中“买水果”这一项

方法三:通过value属性赋值

第三种方法:

该方法可以通过直接设置value属性来实现赋值与选中。

具体示例如下:

对应的下拉列表HTML代码如下:


<select onPropertyChange="showValue(this.value)" id="mysel">
 <option value=""></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>
<input type="button" value="changevalue" onclick="setvalue();">

相关的JavaScript函数代码如下:


function setvalue() {
 document.getElementById("mysel").value="2";
}

希望上述内容对JavaScript编程有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章