Question

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

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

带催化剂符号的菜单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>

Answer 1

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

以下是JavaScript Select作为Google搜索的链接。有很多选择，所以找到适合你的方法。一切都将从编写您的值到页面，到制作AJAX请求。

此外，在处理Catalyst（或任何其他框架）中的表单时，可能需要了解CPAN Modules可能会帮助您处理表单处理。

Answer 2

这最终成为我问题的最终解决方案。 JavaScript函数如下，HTML跟随。应该从客户的主菜单中调用js。结合催化剂的js可以根据客户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>

动态菜单使用催化剂

2 个答案: