Fatal编程技术网
  • javascript/
  • 使用Javascript更改下拉列表以选择多个图像？

使用Javascript更改下拉列表以选择多个图像？

javascript html drop-down-menu

使用Javascript更改下拉列表以选择多个图像？,javascript,html,drop-down-menu,html-table,webpage,Javascript,Html,Drop Down Menu,Html Table,Webpage,我在网页中有一个下拉列表，它当前所做的是显示列表中选中的单个图像 我想实现的是，如果选择一个部门，例如酒吧，它将显示一组酒吧的图像，而不是一个单独的图像，任何人都知道这样做吗？如果我选择另一个选项，例如大学，它将显示多个大学徽标的图像 还有没有一种方法可以将鼠标单击超链接添加到图像，即使我将其用作下拉列表 我想这是可能的，但我找不到关于这个问题的太多信息 任何援助都将是巨大的 我的HTML代码： <table border="0" cellspacing="0" cellpadding="

我在网页中有一个下拉列表，它当前所做的是显示列表中选中的单个图像

我想实现的是，如果选择一个部门，例如酒吧，它将显示一组酒吧的图像，而不是一个单独的图像，任何人都知道这样做吗？如果我选择另一个选项，例如大学，它将显示多个大学徽标的图像

还有没有一种方法可以将鼠标单击超链接添加到图像，即使我将其用作下拉列表

我想这是可能的，但我找不到关于这个问题的太多信息

任何援助都将是巨大的

我的HTML代码：

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%">
            <form name="mygallery">
                <p>
                    <select name="picture" size="1" onChange="showimage()">
                        <option selected value="gfx/Marstons.jpg">Marstons pubs</option>
                        <option value="gfx/NorthUni.jpg" href="http://www.northumbria.ac.uk/">Northumbria University</option>
                    </select>
                </p>
            </form>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <p align="center">
                <img src="gfx/Marstons.jpg" name="pictures" width="99" height="100">
        </td>
    </tr>
</table>
我不确定您需要什么，但您不能直接在选择选项上添加href属性

如果您只想在用户选择时将url添加到您的img上，则可以使用html5提供的data-*属性

下面是一个示例，其中包含您根据请求提供的代码

现场测试的JS小提琴：http://jsfiddle.net/BVAkh/1/

Html部分：

<html>
  <head></head>
  <body>
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%">
            <form name="mygallery">
                <p>
                    <select name="picture" size="1" onChange="javascript:showimage()">
                        <option selected value="gfx/Marstons.jpg">Marstons pubs</option>
                        <option value="gfx/NorthUni.jpg" data-href="http://www.northumbria.ac.uk/">Northumbria University</option>
                    </select>
                </p>
            </form>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <p align="center">
              <img src="gfx/Marstons.jpg" name="pictures" width="99" height="100" />
          </p>
        </td>
    </tr>
</table>
      </body>
    </html>
但我认为你应该重新考虑一下形象的改变。可能会将id设置为p，并使用innerHTML更改内容。如果提供了数据href，您将能够在图像中添加一个
标记。

Im使用javascript中的隐藏显示。显示每个扇区的div，如“pubs”。 
<html>
  <head></head>
  <body>
    <table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100%">
            <form name="mygallery">
                <p>
                    <select name="picture" size="1" onChange="javascript:showimage()">
                        <option selected value="gfx/Marstons.jpg">Marstons pubs</option>
                        <option value="gfx/NorthUni.jpg" data-href="http://www.northumbria.ac.uk/">Northumbria University</option>
                    </select>
                </p>
            </form>
        </td>
    </tr>
    <tr>
        <td width="100%">
            <p align="center">
              <img src="gfx/Marstons.jpg" name="pictures" width="99" height="100" />
          </p>
        </td>
    </tr>
</table>
      </body>
    </html>

function showimage() {
    if (!document.images) return;
    var selectedItem = document.mygallery.picture.options[document.mygallery.picture.selectedIndex];
    document.images.pictures.src = selectedItem.value;   

    if(selectedItem.getAttribute("data-href")) {
      document.images.pictures.onclick = function() {
        window.location.href = selectedItem.getAttribute("data-href");
      }
    }
    else {
      document.images.pictures.onclick = null;
    }  
}