Smarty 下拉列表在选择时更改图像答案

【问题标题】：Smarty Dropdown list change image on selectSmarty 下拉列表在选择时更改图像
【发布时间】：2012-11-24 06:59:47
【问题描述】：

我无法让它在 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">

【问题讨论】：

标签： image select drop-down-menu smarty

【解决方案1】：

您已经在一个包含来自 {$configoption.options} 的元素的 foreach 循环中定义了 {$options}，该循环本身包含来自 {$configurableoptions} 的项目。不幸的是，这个定义超出了范围，因为它在 foreach 循环之外：

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

要（默认情况下）显示 {$options} 的第一个元素，您可以尝试如下操作：

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

【讨论】：