Javascript下拉列表 - 創建鏈接和文本

我想知道是否有人可以幫我完成一些下拉功能，我試着做。Javascript下拉列表 - 創建鏈接和文本

當前portlet位於測試頁上，位於http://www.khl.com/dev/american-cranes-and-transport/右側有一部分叫做「經銷商定位器」，這是有問題的代碼。

目前經銷商定位器工作正常，但我試圖添加額外的功能。

當有人選擇從下拉列表中選擇公司，我想的形象有一個鏈接
當有人從我想相關的文字更改爲所需的文本下拉選擇的公司。

連接的是它是網頁上使用（如果有人Dreamweaver或類似的東西，我真的很感激，如果你可以把它放在那裏）

代碼無論如何，這是一個長鏡頭，但任何解決辦法不勝感激。

<img src="http://www.khl.com/other_files/khl/dealer-locatot.gif" width="300" border="0" usemap="#Map" longdesc="http://www.khl.com/other_files/khl/dealer-locatot.gif"> 
<map name="Map"> 
    <area shape="rect" coords="8,11,127,88" href="http://www.scranet.org/" target="_blank" alt="SC&amp;RA"> 
</map> 

<script language="JavaScript" type="text/javascript"> 
<!-- 
// if you preload images they need to be loaded before they are required 
// once in the cash they can be used as the original file name(&path) or as new Image.src ie SRC[1].src 

ImgPath='http://www.vicsjavascripts.org.uk/StdImages/'; 
ImgPreloadAry=new Array('One.gif','Two.gif','Three.gif','Four.gif'); 
SRCAry=new Array(); 

for (i=0;i<ImgPreloadAry.length;i++){ 
SRCAry[i]=new Image(); 
SRCAry[i].src=ImgPath+ImgPreloadAry[i]; 
} 

function Cng(sel){ 
document.getElementById('img').src=ImgPath+sel.options[sel.selectedIndex].value; 
document.getElementById('tbl').style.backgroundImage='url('+(ImgPath+sel.options[sel.selectedIndex].value)+')'; 
} 





//--> 
</script> 
</head> 

<body> 
<table width="300" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="149"><img src="http://www.khl.com/other_files/khl/dealer-locatot.gif" alt="" width="130" height="80" id=img></td> 
     <td width="151">Related text goes here - along with link to pdf</td> 
    </tr> 
</table> 
<p> 
<table width="149" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="149" align="left" valign="top"> 
      <select name="Sel" size="1" onchange="Cng(this);" > 
       <option value="One.gif">Company 1</option> 
       <option value="Two.gif">Company 2</option> 
       <option value="Three.gif">Company 3</option> 
       <option value="Four.gif">Company 4</option> 
     </select></td> 
    </tr> 
</table> 
<p>

來源

2013-11-21 Sam Wilson

您必須首先將圖像封裝在錨點內，並且在每個下拉列表上都可以更改錨點的href屬性。像 -

<table width="300" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td width="149"> 
      <a id="companyLink" href="#"> 
      <img id="relatedImage" src="http://www.khl.com/other_files/khl/dealer-locatot.gif" alt="" width="130" height="80" id=img> 
      </a> 
     </td> 
     <td id="relatedText" width="151">Related text goes here - along with link to pdf</td> 
    </tr> 
</table>

而在JavaScript中你必須定義一個數組其中將包含與和ImageLink的要顯示爲屬性的文本對象。像 -

var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/'; 
var linksArray = [ 
    { Img: 'One.gif', Link : 'http://www.companyone.com', RelatedText :'Description for company one'}, 
    {Img:'Two.gif', Link : 'http://www.companytwo.com', RelatedText :'Description for company two'}, 
    {Img:'Three.gif', Link : 'http://www.companythree.com',RelatedText : 'Description for company three'}, 
    {Img:'Four.gif', Link : 'http://www.companyfour.com',RelatedText : 'Description for company four'}, 
]; 

function Cng(sel){ 
    var selectedIndex = sel.selectedIndex; 
    document.getElementById('companyLink').href = linksArray[selectedIndex].Link; 
    document.getElementById('relatedText').innerHTML= linksArray[selectedIndex].RelatedText; 
    document.getElementById('relatedImage').src = ImgPath + linksArray[selectedIndex].Img; 
}

我希望這是你想要完成的任務。

來源

2013-11-21 11:21:35 Ashmah

嗨謝謝你的迴應，儘管我正在努力讓它工作。您可以將它添加到我提供的代碼中，因爲我正在努力讓選擇上顯示相關文本。親切的問候， –

實際上在document.getElementById（'relatedText'）。innerHTML中有一個輸入錯誤。我已經糾正它，我認爲這將解決問題。 – Ashmah

完美 - 謝謝 –

Javascript下拉列表 - 創建鏈接和文本

回答

相關問題