Html form select下拉列表菜单与跳转菜单表单标签篇

2019-09-07 郑州网站建设  

Html form select下拉列表菜单与select跳转菜单表单标签案例教程

select目录  

 
一、Form select语法与结构:   -  

<select name=""> 

<option value="0">DIVCSS5</option> 

<option value="1">DIVCSS5</option> 

</select> 

二、Form select标签使用说明:   -  

为什么我们要使用Form select下来菜单列表呢?那是我们用于表单下拉选择所需项。

下面CSS技术DIVCSS5为大家介绍常见html Form select使用地方。

我们使用表单下拉列表选择数据,如省、市、县、年、月等数据,我们即可使用下拉菜单表单进行设置。
select 我下拉列表菜单标签
Option为下拉列表数据标签
Value 为Option的数据值(用于数据的传值)

form select下拉菜单列表使用地方展示


select使用地方,上图为日期下拉列表案例运用截图

三、Form select使用种类:   -  

Select下拉菜单列表表单标签,常使用有两种

1)、普通下拉列表菜单
html代码如下:

<form action="" method="get"> 

<label>1、普通下拉列表菜单</label> 

<select name=""> 

<option value="0">DIVCSS5</option> 

<option value="1">DIVCSS5</option> 

</select> 

</form> 

2)、跳转下拉列表菜单(如常见点击后跳转到选择网站)
常常一些网站做友链,与部门之间使用select下拉标签实现URL跳转。下面我们通过代码与案例接受select跳转菜单应用。

跳转菜单html代码如下:

<form action="" method="get"> 

<label>2、跳转的下拉列表菜单</label> 

<select name="jumpMenu" id="jumpMenu"
 onchange="MM_jumpMenu('parent',this,0)"> 

<option value="">DIVCSS5</option> 

<option value="">DIVCSS5</option> 

</select> 

</form> 

实现跳转还需要在head标签内加入Js脚本动作代码:

<script type="text/javascript"> 

<!-- 

function MM_jumpMenu(targ,selObj,restore){ //v3.0 

eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); 

if (restore) selObj.selectedIndex=0

//--> 

</script> 

即可使用表单select控件实现跳转的列表菜单效果。

3)、更简洁的新建浏览器(选项卡)窗口跳转菜单:
只需<select>标签内加入如下代码:

onchange="javascript:if (this.options[this.selectedIndex].value != '') window.open(this.options[this.selectedIndex].value);this.options[0].selected;"

得到以下代码:


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1011.html转载请标明出处,谢谢合作!
标签:
  • html select
  • html下拉菜单
  • html跳转菜单