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

Question

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

0

Мне очень трудно понять, как создать два динамических выпадающих меню.

Мне нужно заполнить второе выпадающее меню на основе элемента, выбранного в первом выпадающем меню. Я могу заполнить все данные в обоих меню, но это не желаемый результат.

Меню 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>

jr0207 11 фев. 2014, в 00:56

Источник

Теги:

html

perl

drop-down-menu

catalyst

2 ответа

Ещё вопросы

Neil Lunn · Answer 1 · 2014-02-10T23-37-00.000Z

Вы можете заполнить свой первый выбор способом, который у вас есть в шаблоне при рендеринге, но то, что вы хотите, - это динамическое изменение. Для этого вам нужен JavaScript.

Вот ссылка для JavaScript Выберите в качестве поиска Google. Есть много вариантов, поэтому найдите подходящий вам подход. Все будет варьироваться от написания ваших значений на странице до запросов AJAX.

Также, имея дело с формами в Catalyst (или любой другой инфраструктуре), может быть полезно взглянуть на то, какие модули CPAN могут немного помочь вам в обработке форм.

В итоге я понял это. Я смог использовать new Option и подключить правильное значение от катализатора.

jr0207 · Answer 2 · 2014-02-15T11-05-00.000Z

Это оказалось окончательным решением моей проблемы. Ниже приведена функция 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>