欢迎来到酱油妹!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

酱油妹

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

企业模板

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

select目录 Form select语法与结构 Form select标签用认识 select一般菜单与跳转菜单案例 DW软件里截图表单成效 select表单标签案例图 html form select案例概括

1、Form select语法与结构: - TOP

<selectname=""><optionvalue="0">酱油妹</option><optionvalue="1">酱油妹</option></select>

2、Form select标签用说明: - TOP

下面CSS技术酱油妹为大伙介绍容易见到html Form select用地方。

为何大家要用

Form select

下来菜单列表呢?那是大家用于表单下拉选择所需项。

Html form select下拉列表菜单与跳转菜单表单标签篇
select用地方,上图为日期下拉列表案例运用截图

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

3、Form select用类型: - TOP

1)、一般下拉列表菜单


html代码如下:

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

两种

<formaction=""method="get"><label>1、一般下拉列表菜单</label><selectname=""><optionvalue="0">酱油妹</option><optionvalue="1">酱油妹</option></select></form>

跳转菜单html代码如下:

2)、跳转下拉列表菜单(如容易见到点击后跳转到选择网站)


常常一些网站做友情链接,与部门之间用select下拉标签达成网址跳转。下面大家通过代码与案例同意select跳转菜单应用。

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

3)、更简单的新建浏览器(选项卡)窗口跳转菜单:


仅需<select>标签内加入如下代码:

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

<scripttype="text/javascript"><!--functionMM_jumpMenu(targ,selObj,restore){//v3.0eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");if(restore)selObj.selectedIndex=0;}//--></script>

即可用表单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;">

完整案例在线演示

:http://www.pcss5.com/fanli/form-select.html

完整案例下载地址

完整容易新打开网页窗口跳转菜单实例:

<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">酱油妹</option><optionvalue="1">酱油妹</option></select></form>

4、DW软件里截图表单成效: - TOP

Html form select下拉列表菜单与跳转菜单表单标签篇
htmlselect下拉菜单列表与跳转菜单案例截图

5、此select表单标签案例在浏览器中成效: - TOP

Html form select下拉列表菜单与跳转菜单表单标签篇
实例案例截图

学习DIV+CSS欢迎来酱油妹!

立即下载(1.502KB)

6、酱油妹对html form select案例概括说明: - TOP

1)、form select常常大家用此表单控件设置网页下拉列表菜单
2)、当大家选择“2、跳转的下拉菜单列表”下拉数据后,将会跳转到对于指定设置URL网站。用select表单下拉菜单达成跳转网站网址很实用或便捷,同时记得加上JS代码。
3)、html form、form input、html input、input type、form表单

酱油妹为您推荐的有关联课程css达成下拉表单select美化jq css达成下拉列表美化


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.jiangyoumei.com 关注: 时间:2021-03-23 01:01
版权声明:凡注明来源为www.jiangyoumei.com的均为本站原创,转载请注明来源。
本文网址:http://www.jiangyoumei.com/HTML/HTMLjichu/20210323/11612.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧