Динамический select между дочерней и родительской категорией в Textpattern

Динамический select между дочерней и родительской категорией в Textpattern

В статье рассказывается как легко и быстро сделать динамический select между дочерней и родительской категории. Все действия производятся с CMS Textpattern, но основная идея реализации будет работать и в другой CMS, правда SQL-выборку придется делать средствами своей CMS.

Работает это так: в TXP есть возможность использования вложенности категорий. При этом вложенная категория будет дочерней, а та, в которую вложили, будет родительской.

Зачем мне это надо?

В Textpattern 2 категории: Category1 и Category2. В MySQL таблице они именно так и называются, только с маленькой буквы.

Благодаря плагину smd_query в Textpattern`не это реализовывается очень просто. Этот плагин нужен только для выборки категорий из таблицы базы данных. Если Вы хотите сделать что-то подобное в другой CMS, то Вам нужно сделать это чем-то другим.

Сама реализаций динамического select

Для того, чтоб обновление второго select`а происходило без перезагрузки всей страницы, необходимо использовать JS. Сам скрипт я позаимствовал на одном из сайтов, и поэтому привожу его в неизменном виде. Вот он этот скрипт – script.js Его просто подключаем к странице, где будет динамический select.

Подключается вот этим кодом:

<script src="/textpattern/script.js"></script>
<script>
  window.onload = function() {
    dynamicSelect("Category1", "Category2");
  }
</script>

В том месте, где хотите вывести сами селекты, нужно разместить этот код:

<form action="#" method="post">
  Марка машины:
  <select name="Category1" id="Category1">
    <option class="select" value="select">Выберите марку...</option>
    <txp:smd_query query='SELECT name FROM txp_category WHERE parent = "root"'>
      <option value="{name}">{name}</option>
    </txp:smd_query>
  </select>
  Модель машины: 
  <select name="Category2" id="Category2">
    <option class="select" value="select">Выберите модель...</option>
    <txp:smd_query query='SELECT parent, name FROM txp_category WHERE (parent <>; "root" AND parent <> "")'>
      <option class="{parent}" value="{name}">{name}</option>
    </txp:smd_query>
  </select>
</form>

Перед этим конечно же необходимо установить и активировать плагин smd_query.

Как это выглядит в боевом режиме

Все что я тут понаписал, можно посмотреть как это выглядит на реальном примере. А выглядит это как-то так:

Марка машины: Модель машины:
Комментарии
Имя
e-mail
Текст комментария: # ×


Комментарии
Облако тегов
Интересное