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

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

select目录

1. Form select语法与结构
2. Form select标签使用认识
3. select普通菜单与跳转菜单案例
4. DW软件里截图表单效果
5. select表单标签案例图
6. html form select案例总结

一、Form select语法与结构： - TOP

<selectname=""
<optionvalue="0"DIVCSS5</option
<optionvalue="1"DIVCSS5</option
</select

二、Form select标签使用说明： - TOP

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

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

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

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

三、Form select使用种类： - TOP

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

1）、普通下拉列表菜单
html代码如下：

<formaction=""method="get"
<label1、普通下拉列表菜单</label
<selectname=""
<optionvalue="0"DIVCSS5</option
<optionvalue="1"DIVCSS5</option
</select
</form

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

跳转菜单html代码如下：

<formaction=""method="get"
<label2、跳转的下拉列表菜单</label
<selectname="jumpMenu"id="jumpMenu"
onchange="MM_jumpMenu('parent',this,0)"
<optionvalue="http://www.DIVCSS5.com/"DIVCSS5</option
<optionvalue="http://www.divcss5.com/"DIVCSS5</option
</select
</form

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

<scripttype="text/javascript"
<!--
functionMM_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;"

得到以下代码：

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

完整简单新打开网页窗口跳转菜单实例：

<formaction=""method="get"
<label新建浏览器网页窗口下拉跳转菜单</label
<selectname=""onchange="javascript:if (this.options[this.selectedIndex].value != '')
 window.open(this.options[this.selectedIndex].value);this.options[0].selected;"
<optionvalue="0"DIVCSS5</option
<optionvalue="1"DIVCSS5</option
</select
</form

四、DW软件里截图表单效果： - TOP

htmlselect下拉菜单列表与跳转菜单案例截图

五、此select表单标签案例在浏览器中效果： - TOP

实例案例截图

完整案例在线演示：http://www.divcss5.com/fanli/form-select.html
完整案例下载地址：

立即下载（1.502KB）

六、DIVCSS5对html form select案例总结说明： - TOP

1）、form select常常我们使用此表单控件设置网页下拉列表菜单
2）、当我们选择“2、跳转的下拉菜单列表”下拉数据后，将会跳转到对于指定设置URL网站。使用select表单下拉菜单实现跳转网站网址非常实用或方便，同时记得加上JS代码。
3)、html form、form input、html input、input type、form表单

学习DIV+CSS欢迎来DIVCSS5!

• DIVCSS5为您推荐的相关联教程
• css实现下拉表单select美化
• jq css实现下拉列表美化

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。