使用Javascript更改下拉列表以选择多个图像？ [英] Changing a Drop Down list using Javascript to select multiple images?

问题描述

你好



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



请在下面找到我的代码。



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



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



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



任何帮助都会很棒，提前致谢。



HTML

 <   table     border   =  0     cellspacing   = < span class =code-keyword> 0    cellpadding   =  0 >  
 <   tr  >  
 <   td     width   =  100％  >  
 <  表格    name   =  mygallery >  
 <   p  >  
 <  选择   名称  =  picture    size   =  1    onChange   =  showimage（） >  
 <  选项   已选择    value   =  gfx / Marstons.jpg >  Marstons pubs <   / option  >  
 <  < span class =code-leadattribute>选项    value   =  gfx / NorthUni.jpg    href   =  http://www.northumbria.ac.uk/ > 诺森比亚大学<   / option  >  
 < span class =code-keyword><   / select  >  
 <   / p  >  
 <   / form  >  
 <   / td  >  
 <   / tr  > ;  
 <   tr   >  
 <   td     width   =  100％ >  
  <   p     align   =  center >  
 <   img     src   =  gfx / Marstons.jpg    name   = 图片    width   =  99    height   =  100 >  
 <   / td  >  
 <   / tr  < span class =code-keyword>>  
 <   / table  >  

JS

  function  showimage（）{
  if （！document.images） return  
  document  .images.pictures.src = 文档 .mygallery.picture.options [ document  .mygallery.picture.selectedIndex] .value 
} 

解决方案

如果要在选择下拉列表时显示图像组，则应通过指定相关图像路径动态创建图像。 。
 
 
 <  选择    name   =  picture     size   =  1    onChange   =  showimage（） >  
 < span class =code-keywo rd><  选项   已选择    value   =  gfx / Marstons.jpg >  university <   / option  >  
 <  选项    value   =  gfx / NorthUni.jpg   > 公司<   / option  >  
 <   / select  >  
 
 Ex：1.for university 
 <   img     id   =  img1    src   =  university1.jpg    /  >  
 < span class =code-keyword><   img     id   =  img2    src   =  university2 .jpg    /  >  
 <   img     id   =  img3    src   =  university3.jpg    /   >  
 <   img     id   =  img4    src   =  university4.jpg    /   >  
 2.for companies 
 <   img  < span class =code-attribute>   id   =  img1    src   =   companies1.jpg    /  >  
 <   img     id   =  img2    src   =  companies2.jpg    /  >  
 <   img     id   =  img3    src   =  companies3.jpg    /  >  
 <   img     id   =  img4    src   =  companies4.jpg    /  >  
 
 ..... 

Hello

I have a Drop Down List in a web page, what it currently does is displays an individual image that is selected in the list.

Please find my code below.

What I want to achieve is if a sector is selected such as pubs for example, It will display a group of images of pubs instead of one individual image, anyone with any knowledge of doing this?.If I select another option such as University it would display multiple images of University logos.

Also is there a way to add a mouse-click hyperlink to an image even if I am using it as a drop down list?.

I presume this is possible but I cannot find much information on the subject.

Any assistance would be great, Thanks in advance.

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>

JS

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

解决方案

If you want display group of images to shown on selection of dropdownlist you should create images dynamically by assigning related image path..


<select name="picture" size="1" onChange="showimage()">
   <option selected value="gfx/Marstons.jpg">university</option>
   <option value="gfx/NorthUni.jpg" >companies</option>
</select>

Ex: 1.for university
<img id="img1" src="university1.jpg" />
<img id="img2" src="university2.jpg" />
<img id="img3" src="university3.jpg" />
<img id="img4" src="university4.jpg" />
2.for companies
<img id="img1" src="companies1.jpg" />
<img id="img2" src="companies2.jpg" />
<img id="img3" src="companies3.jpg" />
<img id="img4" src="companies4.jpg" />

.....

这篇关于使用Javascript更改下拉列表以选择多个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！