用于多选下拉列表值的Symfony过滤器表单

时间:2017-09-18 17:06:02

标签: ajax symfony filter dropdown

我有一个过滤器表单,我想在多选下拉列表中应用。所以有一个"申请"过滤器的按钮,当点击它时,我想根据过滤器选项更新下拉列表中的值。 (我的表单上还有其他字段/值,在更新下拉列值时不应该消失。)

我完全不知道如何实现这一目标。也许一个AJAX功能会导致解决方案,但我不知道这样的人会是什么样子。我会很高兴任何提示! :)

到目前为止我所拥有的:

过滤

的下拉列表
  • 市场

  • 类型和

  • 航空公司

它们都是多选下拉列表。在选择它们之后,我想点击"申请"然后更新文档列表' -dropdown,以便仅显示连接到所选市场/类型或航空公司的文档。

P.S。另外,我想要实现的是一个文档名称和ID的搜索框。为此,我甚至没有关闭,我甚至没有正确的元素..

    <div class="panel panel-default">
      <div class="panel-body">
      {{ form_start(filterForm) }}
      {{ form_row(filterForm.type) }}
      {{ form_row(filterForm.markets)}}
      {{ form_row(filterForm.airlines)}}
  <input type="submit" class="btn-primary btn btn-xs" value="Apply Filter" />
      {{ form_end(filterForm) }}
      <br clear="all" />
      {{ form_row(form.documentlist) }}
      </div>
    </div>

更新

我的表格:

  public function buildForm(FormBuilderInterface $builder, array $options)
  {

      $builder
          ->setAction($options['data']['url'])
          ->setMethod('GET')
          ->add('type', 'choice', array('choices' => array(
              'document_types.contract' => 1,
              'document_types.general'=>2,
              'document_types.goodwill_policy'=>3,
              'document_types.pricesheet'=>4,
              'document_types.yq_update'=>5,
              'document_types.contract_addendum'=>6),
              'choices_as_values' => true, 'label' => 'label.types',
              'expanded' => false, 'multiple' => true,
              'label' => 'label.type',
              'translation_domain' => 'Documents'))

      ;

      $user = $this->tokenStorage->getToken()->getUser();

      $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) use ($user){
        $form = $event->getForm();

        // only show specific filters based on user's context

        $form->add('airlines', 'entity', array(
          'class' => 'AppBundle:Airline', 'property' => 'id',
          'query_builder' => function (EntityRepository $er) use ($user) {
            $airlines = $user->getAirlines();
            return $er->createQueryBuilder('a')
              ->addOrderBy('a.id', 'ASC')
              ->andWhere('a.id IN (?1)')
              ->setParameter(1,$airlines);
            },
          'choice_value' => 'id',
          'choice_label' => 'id', 'label' => 'label.airlines',
          'expanded' => false, 'multiple' => true,
          'translation_domain' => 'Documents'));

        $form->add('markets', 'entity', array(
          'class' => 'AppBundle:Market', 'property' => 'id',
          'query_builder' => function (EntityRepository $er) use ($user) {
            $markets = $user->getMarkets();
            return $er->createQueryBuilder('m')
              ->addOrderBy('m.id', 'ASC');
              ->andWhere('m.id IN (?1)')
              ->setParameter(1,$markets);
            },
          'choice_value' => 'id',
          'choice_label' => 'id', 'label' => 'label.markets',
          'expanded' => false, 'multiple' => true,
          'translation_domain' => 'Documents'))

这是下拉列表,它应该在选择上一个下拉列表后更新其内容。

    ->add('documentlist', EntityType::class, array(
           'class' => 'DocumentBundle:Document',
              'property' => 'name',
              'expanded' => false, 'multiple' => true,
              'label' => 'label.document_list',
              'empty_value' => "Select document",
              'required' => false,
              'mapped' => false,
              'translation_domain' => 'Documents'} )); 
}

1 个答案:

答案 0 :(得分:0)

好吧,我猜你正在根据之前的帖子为航空公司申请。以下是一些可以帮助您的示例:

let arr = [(a, b) => a + b, 5, 7];

console.log(
  (([a, b]) => new Function(`return (${a})(${b.split(/,/)})`)())
  (`${arr}`.replace(/\s/g, "").match(/(\(.*\)=>[^,]+(?=,))|[^,]{1}[^\1]+/g))
)
// Your PHP Form file
...
->add('local_markets_bool', CheckboxType::class, array( // Show Local Markets?
        'label' => 'Local markets:',
        'required' => false,
        'attr' => array(
                'onchange' => "filter('local_markets')"
        ),
))
...
{# Your Twig file #}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('script/filters.js') }}"></script>
{% endblock %}

然后当您单击// Your Javascript file. Example web/script/filters.js function filter(type){ var markList = document.getElementById("form_market_list"); var optSub = "<option value='' selected='selected'>Choose an option</option>"; if (type == 'local_markets'){ // Local. optSub += "<option value='us'>USA</option>"; optSub += "<option value='ca'>Canada</option>"; } else if (degType == 'americas'){ // TC Degree. optSub += "<option value='us'>USA</option>"; optSub += "<option value='ca'>Canada</option>"; optSub += "<option value='pa'>Panama</option>"; optSub += "<option value='br'>Brazil</option>"; optSub += "<option value='pe'>Peru</option>"; } ... markList.innerHTML = optSub; } 复选框时,触发和onchange()事件,并传入参数local_markets_bool,然后代码将States USA和Canada添加到列表中。

你可能不想这样做,但它会给你和想法。使用jQuery更容易,但这个例子只是简单的Javascript。