asp select下拉菜单选择图标并实时显示-巨人网络通讯

主页 > 知识库 > asp select下拉菜单选择图标并实时显示

asp select下拉菜单选择图标并实时显示

静态方法：将下面的代码复制到body>~/body>内
程序代码
table cellpadding="2" width="226" cellspacing="2" border="0" >
tr>
td width="32" align="right">img id=idface src="..../../../bbs/images/icon/1.gif" alt=个人形象代表 width="32" height="32">/td>
td width="30" >font class=cha2>头像/font>/td>
td width="69">
select class=editbox1 onChange="document.images['idface'].src=options[selectedIndex].value;">
option value=../../../bbs/images/icon/1.gif selected>头像1/option>
option value=../../../bbs/images/icon/2.gif select>头像2/option>
option value=../../../bbs/images/icon/3.gif select>头像3/option>
option value=../../../bbs/images/icon/4.gif select>头像4/option>
option value=../../../bbs/images/icon/5.gif select>头像5/option>
option value=../../../bbs/images/icon/6.gif select>头像6/option>
option value=../../../bbs/images/icon/7.gif select>头像7/option>
option value=../../../bbs/images/icon/8.gif select>头像8/option>
option value=../../../bbs/images/icon/9.gif select>头像9/option>
option value=../../../bbs/images/icon/10.gif select>头像10/option>
option value=../../../bbs/images/icon/11.gif select>头像11/option>
option value=../../../bbs/images/icon/12.gif select>头像12/option>
option value=../../../bbs/images/icon/13.gif select>头像13/option>
option value=../../../bbs/images/icon/14.gif select>头像14/option>
option value=../../../bbs/images/icon/15.gif select>头像15/option>
option value=../../../bbs/images/icon/16.gif select>头像16/option>
option value=../../../bbs/images/icon/17.gif select>头像17/option>
option value=../../../bbs/images/icon/18.gif select>头像18/option>
option value=../../../bbs/images/icon/19.gif select>头像19/option>
option value=../../../bbs/images/icon/20.gif select>头像20/option>
/select>
/td>
td width="69">--> 静态/td>
/tr>
/table>
ASP数组方法：将下面的代码复制到body>~/body>内
程序代码
table cellpadding="2" width="241" cellspacing="2" border="0" >
tr>
td width="32" align="right">img id=idface1 src="..../../../bbs/images/icon/1.gif" alt=个人形象代表 width="32" height="32">/td>
td width="30" >font class=cha2>头像/font>/td>
td width="62">
select onChange="document.images['idface1'].src=options[selectedIndex].value;" class="editbox1" >
%
dim i
for i=1 to 20
%>
option select value="../../../bbs/images/icon/%=I%>.gif">头像%=I%>/option>
%
next
%>
/select>
/td>
td width="91"> --> ASP 数组 /td>
/tr>
/table>
共同点：
1、img id=idface src="1.gif">　　　　　　　　　　　　　　　　// 都必须在默认的图片上赋一个ID号
2、select onChange="document.images['idface'].src=options[selectedIndex].value;">　// 再在下拉菜单中调用这个ID
　　......
　 /select>
不同点：
在静态的制作方法中：
程序代码
　　select ......>
　　　option value=1.gif > 头像1 /option> 　　　　　// 直接在下拉菜单中的option选项中赋予路径
　　　option value=2.gif > 头像2 /option>
　　　......
　　/select>
--------------------------------------------------------------------------------
在ASP数组定义方法中：
程序代码
　　select ......>
　　% dim i 　　　　　　　　　　　　　　　　　　　　　　　　　　// 定义数组 i
　　　 for i=1 to 20 　　　　　　　　　　　　　　　　　　　　　　　// 定义 i 的值为1~20
　　%>
　　option select value="%=I%>.gif">头像%=I%>/option>　　　　　　// 显示第一条选项的值
　　% next %> 　　　　　　　　　　　　　　　　　　　　　　　　// 下一条
　　/select>

您可能感兴趣的文章:

input+select(multiple) 实现下拉框输入值
select下拉选择框美化实现代码(js+css+图片)
jquery取消选择select下拉框示例代码
js自动查找select下拉的菜单并选择(示例代码)
一个不错的仿携程自定义数据下拉选择select
js实现Select下拉框具有输入功能的方法
JS实现的5级联动Select下拉选择框实例
jQuery实现非常实用漂亮的select下拉菜单选择效果
基于jQuery实现select下拉选择可输入附源码下载

标签：雅安巴彦淖尔荆门鹰潭通辽通化普洱运城

巨人网络通讯声明：本文标题《asp select下拉菜单选择图标并实时显示》，本文关键词 asp,select,下拉菜单,选择,；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。