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>
以上文章已同步至本人博客,欢迎访问阅读。