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

水深无声 2022-05-08 09:46 439阅读 0赞

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

![00555.jpg][]

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

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

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

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

![00550.jpg][]

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>

![00551.jpg][]

![00552.jpg][]

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

[00555.jpg]: http://www.longqcloud.cn/images/upload/00555.jpg
[Link 1]: http://www.zy52113.com/LongEnglish/listwords.jsp
[00550.jpg]: http://www.longqcloud.cn/images/upload/00550.jpg
[00551.jpg]: http://www.longqcloud.cn/images/upload/00551.jpg
[00552.jpg]: http://www.longqcloud.cn/images/upload/00552.jpg
[Link 2]: http://www.longqcloud.cn/LongBlog/detailblog.jsp?id=55