欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> Html form select下拉列表菜单与select跳转菜单表单标签案例教程
select目录
一、Form select语法与结构：
&name=&&&&value=&0&DIVCSS5&&value=&1&DIVCSS5&&
二、Form select标签使用说明：
为什么我们要使用Form select下来菜单列表呢？那是我们用于表单下拉选择所需项。
下面技术DIVCSS5为大家介绍常见 select使用地方。
我们使用表单下拉列表选择数据，如省、市、县、年、月等数据，我们即可使用下拉菜单表单进行设置。
select 我下拉列表菜单标签
Option为下拉列表数据标签
Value 为Option的数据值（用于数据的传值）
select使用地方，上图为日期下拉列表案例运用截图
三、Form select使用种类：
Select下拉菜单列表表单标签，常使用有两种：
1）、普通下拉列表菜单
代码如下：
&action=&&&method=&get&&1、普通下拉列表菜单&&name=&&&&value=&0&DIVCSS5&&value=&1&DIVCSS5&&&
2）、跳转下拉列表菜单（如常见点击后跳转到选择网站）
常常一些网站做友情链接，与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。
跳转菜单如下：
&action=&&&method=&get&&2、跳转的下拉列表菜单&&name=&jumpMenu&&id=&jumpMenu&&onchange=&MM_jumpMenu('parent',this,0)&&&value=&/&DIVCSS5&&value=&/&DIVCSS5&&&
实现跳转还需要在head标签内加入Js脚本动作代码：
&type=&text/javascript&&&!--&function&MM_jumpMenu(targ,selObj,restore){&//v3.0&eval(targ+&.location='&+selObj.options[selObj.selectedIndex].value+&'&);&if&(restore)&selObj.selectedIndex=0;&}&//--&&
即可使用表单select控件实现跳转的列表菜单效果。
3）、更简洁的新建浏览器（选项卡）窗口跳转菜单：
只需&select&标签内加入如下代码：
onchange=&javascript:if (this.options[this.selectedIndex].value != '') window.open(this.options[this.selectedIndex].value);this.options[0].&
得到以下代码：
&onchange=&javascript:if&(this.options[this.selectedIndex].value&!=&'')&window.open(this.options[this.selectedIndex].value);this.options[0].&&
完整简单新打开网页窗口跳转菜单实例：
&action=&&&method=&get&&&新建浏览器网页窗口下拉跳转菜单&&&name=&&onchange=&javascript:if (this.options[this.selectedIndex].value != '') window.open(this.options[this.selectedIndex].value);this.options[0].&&&&value=&0&DIVCSS5&&&value=&1&DIVCSS5&&&&&&
四、DW软件里截图表单效果：
html&select下拉菜单列表与跳转菜单案例截图
五、此select表单标签案例在浏览器中效果：
实例案例截图
完整案例在线演示：
完整案例下载地址：
六、DIVCSS5对html form select案例总结说明：
1）、form select常常我们使用此表单控件设置网页下拉列表菜单
2）、当我们选择&2、跳转的下拉菜单列表&下拉数据后，将会跳转到对于指定设置URL网站。使用select表单下拉菜单实现跳转网站网址非常实用或方便，同时记得加上JS代码。
3)、、、、、
学习欢迎来DIVCSS5!
如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • •
必备HTML基础教程 Essential HTML Tutorials
&最新文章NEWS• • • • • • • • • • 相关文章RELATED• • • • • • • • • • CSS EFFECTS / CSS MODULE如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 12:03
原创：本文 DIVCSS5版权所有。
学习与资源分享平台前台：&td&
&asp:HiddenField ID="hidVehTypeId" runat="server" /&
&asp:HiddenField ID="hidVehTypeName" runat="server" /&
&select id="vehType1" name="vehType1"&
&/select&&/td&
最新教程周点击榜
微信扫一扫对于s:select中的list属性一定要初始化，如“list="#request.listYear"”否则会提示找不到该list名称必填缺省值类型描述emptyOptionfalsefalseBoolean是否在题头选项后面添加一个空的(--)选项headerKeyfalseObject/String设置列表的题头主键值. 一定不能为空值! "'-1'"或"''"是正确的取值, ""是错误的取值.headerValuefalseObject/String列表的题头选项值multiplefalseObject/String创建一个多选列表. 如果value属性指定了一个数组(正确的元素类型), 那么将预先选中数组中指定的多个选项.sizefalseInteger该组件列表框的大小 (显示元素的个数)listtrueObject/String创建列表的可迭代数据源. 如果该列表是一个Map(key, value), 那么Map的主键将作为选项()的"value"属性, 而该主键对应的值作为选项的文本内容.listKeyfalseObject/String列表数据源中元素对象的属性, 用于获取选项的值listValuefalseObject/String列表数据源中元素对象的属性, 用于获取选项的文本内容themefalseObject/String输出元素时使用的主题(theme)(不使用缺省的)templatefalseObject/String输出元素时使用的模板(template)(不使用缺省的)cssClassfalseObject/String输出元素时的class属性cssStylefalseObject/String输出元素时的css样式定义(译者注:就是html元素的style属性)titlefalseObject/String在输出元素时设置html属性titledisabledfalseObject/String在输出元素时设置html属性disabledlabelfalseObject/String用于输出一个元素对应的label的表达式labelPositionfalseleftObject/String不赞成使用.labelpositionfalseObject/String定义元素标签的位置(top/left)requiredpositionfalseObject/String定义required属性输出的位置(left|right)namefalseObject/String元素的名字requiredfalsefalseBoolean如果设置为true, 在输出标签时将显示出此字段是必须输入的(译者注:如果使用默认模板,将会标示为"*")tabindexfalseObject/String在输出元素时设置html属性tabindexvaluefalseObject/String预设input元素的value属性.onclickfalseObject/String在输出元素时设置html属性onclickondblclickfalseObject/String在输出元素时设置html属性ondblclickonmousedownfalseObject/String在输出元素时设置html属性onmousedownonmouseupfalseObject/String在输出元素时设置html属性onmouseuponmouseoverfalseObject/String在输出元素时设置html属性onmouseoveronmousemovefalseObject/String在输出元素时设置html属性onmousemoveonmouseoutfalseObject/String在输出元素时设置html属性onmouseoutonfocusfalseObject/String在输出元素时设置html属性onfocusonblurfalseObject/String在输出元素时设置html属性onbluronkeypressfalseObject/String在输出元素时设置html属性onkeypressonkeydownfalseObject/String在输出元素时设置html属性onkeydownonkeyupfalseObject/String在输出元素时设置html属性onkeyuponselectfalseObject/String在输出元素时设置html属性onselectonchangefalseObject/String在输出元素时设置html属性onchangetooltipfalseString设置元素的tooltip属性(译者注:tooltip为工具栏提示)tooltipConfigfalseString设置tooltip属性的配置idfalseObject/Stringid是定位元素时使用的. 对于UI和表单标签它会被用作HTML的id属性<ww:select label="Pets" name="petIds" list="petDao.pets" listKey="id" listValue="name" multiple="true" size="3" required="true"/><ww:select label="Months" name="months" headerKey="-1" headerValue="Select Month" list="#{'01':'Jan', '02':'Feb', []}" value="selectedMonth" required="true"/>
最新教程周点击榜
微信扫一扫