服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|JavaScript|易语言|

服务器之家 - 编程语言 - ASP教程 - asp select下拉菜单选择图标并实时显示

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

2019-09-16 10:53asp开发网 ASP教程

直接在下拉菜单中的option选项中赋予路径,用asp循环输出

静态方法:将下面的代码复制到<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>

延伸 · 阅读

精彩推荐