динамические меню с использованием катализатора

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> 

Второе меню с катализатором нотации. Это меню, которое должно заполнять продуктами на основе идентификатора семейства продуктов из выбранного семейства продуктов в первом меню.

<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 в сочетании с катализатором может заполнить второе раскрывающееся меню местоположений клиентов на основе идентификатора клиента.

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>