使用Javascript动态更改smarty包含文件

Question

我的smarty文件中有两个选项卡。在tab1中，我有一个包含城市列表的下拉菜单。我有基于城市的模板列表，它包含有关城市的详细信息。在第二个选项卡中，我应该根据下拉选择显示相关的城市模板。

例如: Dropdown：

<select name='city' id='city' class="medium" style="float:left" onchange="setCityTpl(this);">
<option value=''></option>
{html_options options=$city_filter selected=$city.name}
</select>

如果我在下拉菜单中选择城市1

我应该将smarty包含文件中的tpl名称设置为city1.tpl

<div id="tab2" class="tab-content" style="display: none; visibility: hidden; padding-top:0px">
{include file=city1.tpl}
</div>

如果我在下拉菜单中选择城市2

我应该将smarty包含文件中的tpl名称设置为city2.tpl

<div id="tab2" class="tab-content" style="display: none; visibility: hidden; padding-top:0px">
{include file=city2.tpl}
</div>

Answer 1

你可以从javascript加载url。所以我认为如果用户从Dropdown1中选择City1，JS将加载city1.tpl，City2将加载city2.tpl

或者您可以执行以下操作: js脚本调用一个带有POST/GET值的url (selected-city.php)，其中包含"city1“或"city2”。selected-city.php使用名为selected的参数(取自POST/GET)和您的tpl检索selected-city.tpl：

<div id....>
{include file=${selected}.tpl}
</div ...>

Answer 2

smarty是一个基于php的模板引擎，这意味着它运行在服务器端的上，而javascript运行在客户端的(用户的浏览器)上。所以，在用户真正看到你的页面之前，聪明的模板已经完成了处理，所有的包含都已经完成了。

要实现您想要的效果，一种方法是包含所有文件并隐藏相应的html元素(例如，使用display:none )。然后，根据用户的选择，您将显示所需的元素(本例中的第二个下拉列表