本文介绍了在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编程有所帮助。