收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 13161|回复: 13

如何让选择框(select)的属性(value)既能显示图片又能加链接

  [复制链接]
发表于 2011-11-15 10:39:16 | 显示全部楼层 |阅读模式
大家好,需要在页面中实现既能用下拉框显示相关图片,有能点击图片的时候有链接。

用到了下面这个效果:
select.png

代码如下:

  1. <div>
  2. <select name=lanrentuku onchange="document.images['idface'].src=options[selectedIndex].value;">
  3.         <option value="http://www.lanrentuku.com/down/js/images/12625057550.gif" onclick="#" >头像01</option>
  4.         <option value="http://www.lanrentuku.com/down/js/images/12625057551.gif" >头像02</option>
  5.         <option value="http://www.lanrentuku.com/down/js/images/12625057552.gif" >头像03</option>
  6. </select>   
  7. <div style="position:absolute;"><img src="http://www.lanrentuku.com/down/js/images/12625057550.gif" id=idface></div>
  8. </div>
复制代码
可以看出,关键是value值,现在想要点击这个图片(头像)时,跳转到相关的链接,也找到了有关的代码,如下,但是问题是,怎么为select的option赋予2个Value值呢,既能显示图片,又能加个跳转链接。小弟水平太菜,请各位高手指点,俺先谢过了。
  1.      <select id=select onchange=window.open(this.value,'_blank') >
  2.                 <option value="http://www.cctv.com/">头像01</option>
  3.                 <option value="http://www.baidu.com/">头像02</option>
  4.                 <option value="http://www.google.com/">头像03</option>
  5.                     </select>
复制代码
发表于 2011-11-15 11:04:15 | 显示全部楼层
你吧链接加到后面不就有了


<select id=select onchange=window.open(this.value,'_blank') >
<option value="http://www.cctv.com/"><a href="">头像01</a></option>
<option value="http://www.baidu.com/"><a href="">头像02</a></option>
<option value="http://www.google.com/"><a href="">头像03</a></option>
</select>
回复 支持 反对

使用道具 举报

发表于 2011-11-15 11:07:53 | 显示全部楼层
把img用a标签包裹起来。

给option一个自定义属性。

在select的onchange事件里面,改变图片地址,改变超链接属性(图片地址和超链接属性都是对应option的属性)。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-11-15 11:09:48 | 显示全部楼层
谢谢楼上兄弟的回复啊,可是这种在option里加<a>的方法真不行啊,你试下根本不能点击跳转。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-11-15 11:12:45 | 显示全部楼层
请阿柄进一步赐教,谢谢了!
回复 支持 反对

使用道具 举报

发表于 2011-11-15 11:14:28 | 显示全部楼层
没让你在option里面加<a>啊。
<option value="   " href=""></option>
在onchange事件里面,获取img外层的a标签,a.href=options[selectedIndex].href
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-11-15 11:30:13 | 显示全部楼层
lslglb 发表于 2011-11-15 11:14
没让你在option里面加啊。

在onchange事件里面,获取img外层的a标签,a.href=options[selectedIndex].hr ...

    <div>
    <select name=lanrentuku onchange="document.images['idface'].src=options[selectedIndex].value;" onchange="a.href=options[selectedIndex].href;">
            <option value="http://www.lanrentuku.com/down/js/images/12625057550.gif"  href="http://www.cctv.com/">头像01</option>
            <option value="http://www.lanrentuku.com/down/js/images/12625057551.gif" href="http://www.baidu.com/">头像02</option>
            <option value="http://www.lanrentuku.com/down/js/images/12625057552.gif" href="http://www.google.com/">头像03</option>
    </select>   
    <div style="position:absolute;"><img src="http://www.lanrentuku.com/down/js/images/12625057550.gif" id=idface></div>
    </div>

这样行不行呢?
回复 支持 反对

使用道具 举报

发表于 2011-11-15 11:53:49 | 显示全部楼层
我的想法是把img提取出来,单独来改变其属性,一会我给你做个demo吧
回复 支持 反对

使用道具 举报

发表于 2011-11-15 12:18:04 | 显示全部楼层
捕获select当前选择的option,在option里可以加自定义属性,用来存放头像地址,然后修改下面图片地址。
回复 支持 反对

使用道具 举报

发表于 2011-11-15 12:55:06 | 显示全部楼层
本帖最后由 fuhao200866 于 2011-11-15 12:57 编辑

刚做了一个demo,望指点,不知道是不是lz的意思。另外添加了一个切换头像loading

 提示:您可以先修改部分代码再运行

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>加载头像</title>
  7. <meta name="generator" content="Studio 3 http://aptana.com/">
  8. <meta name="author" content="anjor">
  9. <!-- Date: 2011-11-15 -->
  10. <style type="text/css">
  11. * { margin: 0; padding: 0;}
  12. </style>
  13. <script type="text/javascript">
  14. var EventUtil = {
  15.         addHandler: function(elment, type, handler){
  16.                 if(window.addEventListener){
  17.                         elment.addEventListener(type, handler);
  18.                 }else{
  19.                         elment.attachEvent("on"+type, handler);
  20.                 }
  21.                
  22.         },
  23.         getEvent: function(event){
  24.                 return event ? event : window.event;
  25.         },
  26.         preventDefault : function(event){
  27.                 if(event.preventDefault){
  28.                         event.preventDefault();
  29.                 }else{
  30.                         event.returnValue = false;
  31.                 }
  32.         },
  33.         getTarget : function(event){
  34.                 if(event.target){
  35.                         return event.target;
  36.                 }else{
  37.                         return event.srcElement;
  38.                 }
  39.         }
  40. }
  41. </script>
  42. </head>
  43. <body>

  44. <select id="changeheadPic">
  45.         <option value="0" imgsrc="http://video.kaku.tv/static/images/face50.jpg" ahref="javascript:void(0)">-请选择头像-</option>
  46.         <option value="1" imgsrc="http://video.kaku.tv/static/images/sjhd/xddmxlit.jpg" ahref="http://www.ikaku.com">头像1</option>
  47.         <option value="2" imgsrc="http://video.kaku.tv/static/images/sjhd/sgslit.jpg" ahref="http://www.baidu.com">头像2</option>
  48.         <option value="3" imgsrc="http://video.kaku.tv/static/images/sjhd/gpic4.jpg" ahref="http://www.qq.com">头像3</option>
  49.         <option value="4" imgsrc="http://video.kaku.tv/static/images/sjhd/gpic8.jpg" ahref="http://www.google.com">头像4</option>
  50.         <option value="5" imgsrc="http://video.kaku.tv/static/images/sjhd/gpic6.jpg" ahref="http://www.sina.com">头像5</option>
  51.         <option value="6" imgsrc="http://video.kaku.tv/static/images/sjhd/mxddp_03.jpg" ahref="http://www.163.com">头像6</option>
  52.         <option value="6" imgsrc="http://www.lapland.name/usr/uploads/2011/01/507571484.jpg" ahref="http://www.163.com">头像7</option>
  53. </select>
  54. <a href="javascript:void(0)" id="headPic" style="position: relative; width: 50px; height: 50px; display: block; overflow:hidden;"><img src="http://video.kaku.tv/static/images/loading.gif" id="loadingPic" style="position: absolute; left: 50%; z-index: 100; top: 50%; margin: -8px 0 0 -8px; display: none;"><img src="http://video.kaku.tv/static/images/face50.jpg" style="position: absolute;" width="50" height="50"></a>

  55. <script>
  56. window.onload = function(){
  57.         var oSelectPic = document.getElementById("changeheadPic");
  58.         var oaPic = document.getElementById("headPic");
  59.         var loadPic = document.getElementById("loadingPic");
  60.         var oChangeImg = oaPic.getElementsByTagName("img")[1];
  61.         var option = null;
  62.         EventUtil.addHandler(oSelectPic,"change", function(event){
  63.                 loadPic.style.display = "block";
  64.                 var oNewImg = new Image();
  65.                 EventUtil.addHandler(oNewImg, "load", function(){
  66.                         loadPic.style.display = "none";
  67.                         oChangeImg.src = oNewImg.src;
  68.                         oNewImg = null;
  69.                 });
  70.                 option = oSelectPic.options[oSelectPic.selectedIndex];
  71.                 oNewImg.src = option.getAttribute("imgsrc");
  72.                 oaPic.href = option.getAttribute("ahref");
  73.                 option = null;
  74.         });
  75. }

  76. </script>
  77. </body>
  78. </html>
复制代码
回复 支持 反对

使用道具 举报

发表于 2011-11-15 12:58:10 | 显示全部楼层
只测试到ie7+,chrome,ff,
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-11-15 13:07:38 | 显示全部楼层
谢谢大家的指点哈。
呦呦烈鸟你做的效果非常棒呀!在下五体投地的佩服

回复 支持 反对

使用道具 举报

发表于 2011-11-15 13:39:47 | 显示全部楼层
F10#方法不错啊
回复 支持 反对

使用道具 举报

发表于 2011-11-15 13:43:02 | 显示全部楼层
dmt8 发表于 2011-11-15 13:07
谢谢大家的指点哈。
呦呦烈鸟你做的效果非常棒呀!在下五体投地的佩服

初学者。。。献丑了。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-10-29 19:24 , Processed in 0.109098 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表