Question

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

我想要实现的是，如果选择某个扇区，例如pubs，它会显示一组pubs而不是一个单独的图像，任何知道这样做的人？如果我选择其他选项，例如大学，它将显示大学徽标的多个图像。

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

我认为这是可能的，但我找不到有关该主题的更多信息。

任何帮助都会很棒。

我的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>

我的Javascript

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

Answer 1

我不确定您的需求是什么，但您无法直接在选择选项上添加href属性。

如果您只想在您的img上添加网址选项，以便在用户选择时将其应用到您的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>

Js part：

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;
    }  
}

但我认为您应该重新考虑图像变化。也许为你的p设置一个id并用innerHTML改变内容。如果提供了data-href，您将能够为图像添加<a></a>标记。

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

1 个答案: