Symfony篩選表單用於多選下拉列表

Question

我有一個篩選表單，我希望將其應用於多選下拉列表。所以過濾器有一個「應用」按鈕，點擊它時，我想根據過濾器選項更新下拉列表中的值。 （我的表單上還有其他字段/值，在更新下拉值時不應該消失。）

我完全不知道如何實現此目的。也許一個AJAX函數會導致解決方案，但我不知道這樣的一個樣子。我會很高興的任何提示！ :)

我到目前爲止有：

過濾器的下拉列表中的

• 市場

• 類型和

• 航空公司

他們都是多選下拉菜單。選擇它們後，我想點擊「應用」，然後更新「文件列表」下拉菜單，以便只顯示連接到所選市場/類型或航空公司的文件。

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'})); 
} 

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。