Smarty下拉列表选择更改图像

时间:2012-12-06 09:19:12

标签: image select drop-down-menu smarty

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

1 个答案:

答案 0 :(得分:0)

你在foreach循环中定义了{$ options},其中包含来自{$ configoption.options}的元素,其中包含来自{$ configurableoptions}的项目。不幸的是,这个定义超出了范围,因为它超出了foreach循环:

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

To(默认情况下)显示{$ options}的第一个元素,您可以尝试这样的内容:

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