javaScript 实现一个下拉列表选择的函数

最新推荐文章于 2022-02-09 17:21:03 发布

转载最新推荐文章于 2022-02-09 17:21:03 发布 · 565 阅读

文章标签：

#javascript #button #function #input

js 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个简单的JavaScript程序，用于实现网页上输入框数值与选择器选项间的联动效果。当用户在输入框中输入1到3之间的数字时，相应的选择器选项会被自动选中。

转载自：http://zhidao.baidu.com/question/51292243

实现代码如下：
<html>
<head>
</head>
<script language="javascript">
var x=1; 
function changeSelect()
{
 x=document.getElementById("x_value").value;        //得到文本框中输入的x的值
 if(x>3||x<1) {alert("请输入1－3中的数字!");return;}  //简单的判断x的输入值
 var selectObj=document.getElementById("selectID");    //得到列表框对象
 for(var i=0;i<selectObj.options.length;i++)          //循环判断列表项中的值是否与x值相等，若相等则令其被选中
 {
  if(selectObj.options[i].value==x) selectObj.options[i].selected="selected";
 }
}
</script>
<body>
<select name="sel" id="selectID"> 
<option value="1">a</option> 
<option value="2">b</option> 
<option value="3">c</option> 
</select> 
<br>
请输入x的值:<input id="x_value" /><input type="button" onclick="changeSelect()" value="确定"/>
</body>
</html>