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

Question

我有一个过滤器表单，我想将其应用于多选下拉菜单。因此，过滤器有一个“应用”按钮，单击它时，我想根据过滤器选择更新下拉列表中的值。 （我的表单上还有其他字段/值在更新下拉值时不应消失。）

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

到目前为止我所拥有的：

过滤下拉列表

• 市场

• 类型和

• 航空公司

它们都是多选下拉菜单。选择它们后，我想点击“应用”，然后“文档列表”下拉列表应该更新，以便只显示与所选市场/类型或航空公司相关的文档。

附：另外，我喜欢实现的是文档名称和 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'} )); 
}

Answer 1

嗯，我猜您是根据您之前的帖子为航空公司申请的。以下是一些应该对您有所帮助的示例：

// 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;
}

然后，当您单击 local_markets_bool 复选框时，将触发 onchange() 事件，并传入参数 local_markets，然后代码将美国和加拿大国家添加到列表中。

你可能不想那样做，但它会给你和想法。使用 jQuery 更容易，但示例只是普通的 Javascript。