Html form 下拉列表菜单与跳转菜单表单标签篇 alexyuyu 2021-11-18 http://www.divcss5.com/html/h336.shtml Html form <select>下拉列表菜单与跳转菜单表单标签篇 Html form select下拉列表菜单与select跳转菜单表单标签案例教程 select目录 Form select语法与结构 Form select标签使用认识 select普通菜单与跳转菜单案例 DW软件里截图表单效果 select表单标签案例图 html form select案例总结 一、Form select语法与结构： - TOP <select name=""> <option value="0">DIVCSS5</option> <option value="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代码如下： <form action="" method="get"> <label>1、普通下拉列表菜单</label> <select name=""> <option value="0">DIVCSS5</option> <option value="1">DIVCSS5</option> </select> </form> 2）、跳转下拉列表菜单（如常见点击后跳转到选择网站） 常常一些网站做友情链接，与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。 跳转菜单html代码如下： <form action="" method="get"> <label>2、跳转的下拉列表菜单</label> <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu(\'parent\',this,0)"> <option value="http://www.DIVCSS5.com/">DIVCSS5</option> <option value="http://www.divcss5.com/">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;" 得到以下代码： <select onchange="javascript:if (this.options[this.selectedIndex].value != \'\') window.open(this.options[this.selectedIndex].value);this.options[0].selected;"> 完整简单新打开网页窗口跳转菜单实例： <form action="" method="get"> <label>新建浏览器网页窗口下拉跳转菜单</label> <select name=""onchange="javascript:if (this.options[this.selectedIndex].value != \'\') window.open(this.options[this.selectedIndex].value);this.options[0].selected;"> <option value="0">DIVCSS5</option> <option value="1">DIVCSS5</option> </select> </form> 四、DW软件里截图表单效果： - TOP html select下拉菜单列表与跳转菜单案例截图 五、此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实现下拉列表美化 如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h336.shtml 分类： 技术点： 相关文章： 猜你喜欢 相关资源 相似解决方案 热门标签 Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode By © 2026 likecs 版权所有,本站所有数据收集于网络如有侵犯到您的权益请联系 进行下架处理1。 粤ICP备22038628号Powered By WordPress

http://www.divcss5.com/html/h336.shtml

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

1. <select name=""> 
2. <option value="0">DIVCSS5</option> 
3. <option value="1">DIVCSS5</option> 
4. </select> 

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

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

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

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

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

三、Form select使用种类：   -   TOP

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

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

1. <form action="" method="get"> 
2. <label>1、普通下拉列表菜单</label> 
3. <select name=""> 
4. <option value="0">DIVCSS5</option> 
5. <option value="1">DIVCSS5</option> 
6. </select> 
7. </form> 

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

跳转菜单html代码如下：

1. <form action="" method="get"> 
2. <label>2、跳转的下拉列表菜单</label> 
3. <select name="jumpMenu" id="jumpMenu"
    onchange="MM_jumpMenu(\'parent\',this,0)"> 
4. <option value="http://www.DIVCSS5.com/">DIVCSS5</option> 
5. <option value="http://www.divcss5.com/">DIVCSS5</option> 
6. </select> 
7. </form> 

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

1. <script type="text/javascript"> 
2. <!-- 
3. function MM_jumpMenu(targ,selObj,restore){ //v3.0 
4. eval(targ+".location=\'"+selObj.options[selObj.selectedIndex].value+"\'"); 
5. if (restore) selObj.selectedIndex=0; 
6. } 
7. //--> 
8. </script> 

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

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

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

得到以下代码：

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

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

1. <form action="" method="get">  
2. <label>新建浏览器网页窗口下拉跳转菜单</label>  
3. <select name=""onchange="javascript:if (this.options[this.selectedIndex].value != \'\')
   window.open(this.options[this.selectedIndex].value);this.options[0].selected;">  
4. <option value="0">DIVCSS5</option>  
5. <option value="1">DIVCSS5</option>  
6. </select>  
7. </form>  

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

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

五、此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实现下拉列表美化

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h336.shtml