关于HTML中select标记的一些知识

         select标记是网页编程中比较常用的一种标记，身为表单标记的一员，它主要是通过option标记结合其他表单标记（诸如input，textarea）一起来实现表单的效果，表单要实现的就是向下一级传递数据。这种情况下它的使用格式如下

除了上述使用情况外，它还可以单独使用，这也是我写这篇博客的重点。

1.通过select的option标记直接进入想进的界面

这种情况我根据做的一个英语单词网页来看效果，点击查看 ,使用的代码如下：

<select onchange="document.location=options[selectedIndex].value" size="1">
     <%
        for(int i=1;i<=pages;i++){
        	if(i==pageI){
        		%>
        	    <option selected="/listwords.jsp?cpage=<%=i%>">第<%=i %>页</option>
        	    <%
        	}else{
        		%>
        	    <option value="/listwords.jsp?cpage=<%=i%>">第<%=i %>页</option>
        	    <%
        	}
        }
     %>
 	</select>

如上所示，点击指定页码的option，即可直接进入该页的单词以显示，主要就是将option的value值设为该页码的链接，然后在select中添加onchange事件即可。

2.通过结合js来实现跳转

这种情况我拿做的运动奖金赛显示记录网页来说，通过点击下拉列表，实现查看指定月份的奖金赛记录

<select id="change" onchange="change()">
			<option value="all">请选择</option>
			<option value="all">全部</option>
			<option value="2018-09">2018-09</option>
			<option value="2018-10">2018-10</option>
			<option value="2018-11">2018-11</option>
			<option value="2018-12">2018-12</option>
		</select>
	   <script type="text/javascript">
			function change(){
				var ch=document.getElementById("change");
				//下面第一个返回选择的下拉列表的文本值，第二个返回选择的值对应的value
				//var va=ch.options[ch.selectedIndex].innerHTML;//下拉列表选择的项
				var va=ch.options[ch.selectedIndex].value;//下拉列表选择的项
				window.location.href="showContest.jsp?month="+va;
			}
		</script>

以上文章已同步至本人博客，欢迎访问阅读。