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">