Smarty下拉列表選擇更改圖像

Question

我不能得到這個工作在smarty模板（.tpl），雖然它使用普通的HTML時工作正常。當用戶從下拉菜單中選擇時，圖像被替換。模板中發生的事情是被替換的圖像顯示爲空白，這表明它無法找到src。

{literal} 
<script> 
function displayResult(selTag) 
{ 
var x=selTag.options[selTag.selectedIndex].text; 
alert("You selected: " + x); 
document.getElementById('temp_image').src='images/'+ x +'.jpg'; 
} 
</script> 
{/literal} 

<div class="configoptions"> 
{foreach from=$configurableoptions item=configoption} 
{if $configoption.optiontype eq 1} 
<select name="configoption[{$configoption.id}]" id="configoption[{$configoption.id}]"  onchange="displayResult(this); recalctotals();"> 
{foreach key=num2 item=options from=$configoption.options} 
<option value="{$options.id}"{if $configoption.selectedvalue eq $options.id} selected="selected"{/if}>{$options.name}</option> 
{/foreach} 
</select> 
<br /> 

<img id="temp_image" src="images/templates/{$options.name}.jpg"> 

Answer 1

你定義包含來自其本身包含{$ configurableoptions} {項目$ configoption.options}元素的foreach循環內{$選項}。不幸的是這個定義出的範圍，因爲其在foreach循環之外：

爲（默認）顯示的{$}選項的第一個元素，你可以嘗試這樣的事：

<img id="temp_image" src="images/templates/{$configurableoptions[0].options[0].name}.jpg">