使用催化剂的动态菜单答案

【问题标题】：dynamic menus using catalyst使用催化剂的动态菜单
【发布时间】：2014-03-08 12:48:48
【问题描述】：

我很难弄清楚如何创建两个动态下拉菜单。

我需要能够根据在第一个下拉菜单中选择的项目来填充第二个下拉菜单。我可以在两个菜单中填充所有数据，但这不是预期的结果。

带有催化剂符号的菜单 1：

<select name="select_productsuiteid" required="yes" onChange="return setmode('selectProdSuite',this.form)">
  <option value="" selected="Selected">Please Select a Product Family</option>
  [% FOREACH prod_fam IN prod_fams %]
  <option value="[% prod_fam.fam_id %]">[% prod_fam.fam_name %]</option>
  [% END %]
</select>

带有催化剂符号的第二个菜单。该菜单应根据第一个菜单中所选产品系列的产品系列 ID 填充产品。

<select name="select_productid" required="yes" onChange="return setmode('selectProd',this.form)">
  <option value selected="selected">(no value)</option>
  [% FOREACH prod IN prods %]
  <option value="[% prod.prod_id %]">[% prod.prod_name %]</option>
  [% END %]
</select>

【问题讨论】：

标签： html perl drop-down-menu catalyst

【解决方案1】：

您可以在渲染时以模板中的方式填充您的第一个选择，但您想要的是动态更改。所以你需要 JavaScript 来做到这一点。

这是JavaScript Select 的链接，作为谷歌搜索。有很多选择，所以找到适合您的方法。从将您的值写入页面，到发出 AJAX 请求，一切都包括在内。

此外，在 Catalyst（或任何其他框架）中处理表单时，可能值得看看 CPAN Modules 可以帮助您处理表单。

【讨论】：

我最终弄明白了。我能够使用new Option 并插入来自催化剂的正确值。

【解决方案2】：

这最终成为了我的问题的最终解决方案。下面是 JavaScript 函数，下面是 HTML。 js应该从客户的主菜单中调用。 js结合catalyst可以根据客户ID填充第二个客户位置下拉菜单。

function dispSites() {
console.log('dispSites called');
var custSelection = document.adminform.select_Customerid.value;
var siteIndex = 1 ;
document.adminform.select_Siteid.options.length = 0;
[% FOREACH vetSite IN cust_locs %]
if (custSelection == [% vetSite.loc_cust_id %]) {
    var siteName ="[% vetSite.loc_name %]" ;
    var siteId =[% vetSite.loc_id %] ;
    document.adminform.select_Siteid.options[siteIndex] = new Option(siteName,siteId);
    siteIndex++ ;
    console.log('Adding customer id:',custSelection,'Site id/name:', siteId, siteName);
}
    [% END %]

}

<select name="select_Customerid" id="select_Customerid" required="yes" onchange="dispSites(this.form)">
            <option value="" selected>Select customer</option>
            [% FOREACH cust IN custs -%]
            <option value="[% cust.cust_id %]">[% cust.cust_name %]</option>
            [% END -%]
        </select>
    </td>
    <td class="tdright" ><b>*Site:</b></td>
        <td >
        <select name="select_Siteid" id="select_Siteid" required="yes" >
            <option value="" selected>Select site</option>
            [% FOREACH loc IN cust_locs -%]
            <option value="[% loc.loc_id %]">[% loc.loc_name %]</option>
            [% END -%]
        </select>

【讨论】：