学习JavaScript的select标签使用img详解

阿里云>云栖社区>正文 JavaScript通过select动态更换图片的方法_javascript技巧 本文实例讲述了JavaScript通过select动态更换图片的方法。分享给大家供大家参考。具体分析如下： 下面的JS代码在select列表变化时触发SetBeerIcon()函数，SetBeerIcon()函数可以根据select选择的值动态修改图片 ...

...

Select beer heineken sol amstellight coronalight coronaextra

希望本文所述对大家的javascript程序设计有所帮助。

Html form select下拉列表菜单与select跳转菜单表单标签案例教程 select目录 Form select语法与结构 Form select标签使用认识 select普通菜单与跳转菜单案例 DW软件里截图表单效果 select表单标签案例图 html form select案例总结 一、Form select语法与结构： - TOP

DIVCSS5 DIVCSS5

二、Form select标签使用说明： - TOP 为什么我们要使用Form select下来菜单列表呢？那是我们用于表单下拉选择所需项。 下面CSS技术DIVCSS5为大家介绍常见html Form select使用地方。 我们使用表单下拉列表选择数据，如省、市、县、年、月等数据，我们即可使用下拉菜单表单进行设置。 select 我下拉列表菜单标签 Option为下拉列表数据标签 Value 为Option的数据值（用于数据的传值）

select使用地方，上图为日期下拉列表案例运用截图 三、Form select使用种类： - TOP Select下拉菜单列表表单标签，常使用有两种： 1）、普通下拉列表菜单 html代码如下：

1、普通下拉列表菜单 DIVCSS5 DIVCSS5

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

2、跳转的下拉列表菜单 DIVCSS5 DIVCSS5

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

即可使用表单select控件实现跳转的列表菜单效果。 3）、更简洁的新建浏览器（选项卡）窗口跳转菜单： 只需标签内加入如下代码： 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;"> 完整简单新打开网页窗口跳转菜单实例：

新建浏览器网页窗口下拉跳转菜单

DIVCSS5 DIVCSS5

四、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

HTML基础必学列表 html标签大全

标签 html div标签 html span标签 html a超链接标签 html br换行标签 html p段落标签 html br与p区别 H1 H2 H3 H4标题标签 html px em pt长度单位 html b加粗标签 html strong加粗标签 html b与strong区别用法 html em强调标签 html i斜体标签 html u下划线标签 html s贯穿线标签 html img图片标签 html sub下标 sup上标 html nobr强制不换行 html hr水平线标签 html form表单标签 html label标签 html input标签 Html textarea文本框标签 Html select下拉表单 html checkbox多选框 html radio单选框 html font颜色 HTML iframe框架标签 html table tr td th表格 html dl dt dd标签 html font标签 html ol li列表 html ul li列表 html注释 html base标签 html title标签 html link标签 html script标签 html meta标签 html head标签 html style标签 html body标签 html5介绍 html5教程 Html form 下拉列表菜单与跳转菜单表单标签篇 Html form select下拉列表菜单与select跳转菜单表单标签案例教程 select目录 Form select语法与结构 Form select标签使用认识 select普通菜单与跳转菜单案例 DW软件里截图表单效果 select表单标签案例图 html form select案例总结 一、Form select语法与结构： - TOP DIVCSS5 DIVCSS5 二、Form select标签使用说明： - TOP 为什么我们要使用Form select下来菜单列表呢？那是我们用于表单下拉选择所需项。 下面CSS技术DIVCSS5为大家介绍常见html Form select使用地方。 我们使用表单下拉列表选择数据，如省、市、县、年、月等数据，我们即可使用下拉菜单表单进行设置。 select 我下拉列表菜单标签 Option为下拉列表数据标签 Value 为Option的数据值（用于数据的传值） select使用地方，上图为日期下拉列表案例运用截图 三、Form select使用种类： - TOP Select下拉菜单列表表单标签，常使用有两种： 1）、普通下拉列表菜单 html代码如下：

1、普通下拉列表菜单 DIVCSS5 DIVCSS5

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

2、跳转的下拉列表菜单 DIVCSS5 DIVCSS5

实现跳转还需要在head标签内加入Js脚本动作代码： 即可使用表单select控件实现跳转的列表菜单效果。 3）、更简洁的新建浏览器（选项卡）窗口跳转菜单： 只需标签内加入如下代码： onchange="javascript:if (this.options[this.selectedIndex].value != '') window.open(this.options[this.selectedIndex].value);this.options[0].selected;" 得到以下代码： 完整简单新打开网页窗口跳转菜单实例：

新建浏览器网页窗口下拉跳转菜单 DIVCSS5 DIVCSS5

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