通过JS选中下拉框的下一个选项

 小编也不算专业写前端的,JS也不是很熟,写不出太精华的JS.多多包涵,前几天工作需求中有这么个要求,我就想了下,自己写了个demo,希望能给你带来一点灵感,顺便也难得找jQuery,小编在这里精心为你准备了jQuery1.12.4的下载链接>>点击下载

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <script type="text/javascript"  src="C:\Users\TNG_sep\Desktop\HTML\jquery-1.12.4.js"></script>
 <body style="background-color: beige">
 <input type="button" value="选中下一个拉选项" onClick="getvalue()" style="width: 150px;height: 30px;background-color: #08CB3F;margin-left: 39%;margin-top: 20%" />
  <select id="status"  onchange="getnextnumber()" style="margin-left: 20px" >
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
    <option value="4">选项4</option>
    <option value="5">选项5</option>
	</select>
 </body>
<script type="text/javascript" >
	var j=1;//保存这一次完成之后的数值,初始值为1,以为显示的时候默认有一个选中了
	function getvalue(){
	var objS = document.getElementById("status");
    //获取到下拉框的长度
	var k=objS.length;
		if(j>=k){//若果这个数大于等于长度说明到最后一个了,设为0,重新开始循环
			j=0;
		}
		objS.options[j].selected = true;
		getnextnumber();
		if(j<k){
			j=j+1;
		}
	}
	
	function getnextnumber() {
		var objS = document.getElementById("status");
		//获取选择的下拉框
		var name = objS.options[objS.selectedIndex].value;
		var length=objS.length;
	   alert("选中的下拉框中的值"+name)
	}
</script>
</html>

猜你喜欢

转载自blog.csdn.net/qq_39455650/article/details/85100004