如何根據第一個選項填充第二個選項列表

Question

好的，首先要做的第一件事。我已經知道如何根據第一個選擇使用jQuery和AJAX請求填充第二個選項列表。

我的問題在用戶提交表單後開始。假設您提交表單，但由於您忘記了一些輸入，它拒絕了您的請求。在這種情況下，我必須填寫第二個選項列表，而不需要用戶再次選擇第一個選項。

首先，我向表單類注入一個request對象，如果請求是post並且值大於0，我填充第二個選項列表。

這是正確的方法嗎？我怎樣才能使這個操作更好？

<?php 
public function buildForm(FormBuilderInterface $builder, array $options) 
{ 
    $city = $this->request->get('fos_user_registration_form_city', 0); 
    // if city selected then populate provinces... 
    if($city) 
     $provinces = $this->getProvinces($city); 
    else 
     $provinces = [0 => '...']; 

    $builder->add('provinces', 'choice', array(
      'choices' => $provinces, 
      'label' => 'form.province', 
      'preferred_choices' => array(0), 
      'translation_domain' => 'FOSUserBundle', 
      'required' => true, 
     )); 
} 

Answer 1

您可以使用表單事件：PRE_SET_DATA POST_SUBMIT 類型現在看起來像：

namespace AppBundle\Form\Type; 
use Symfony\Component\Form\FormInterface; 
use AppBundle\Entity\Sport; 
class SportMeetupType extends AbstractType { 
public function buildForm(FormBuilderInterface $builder, array $options) 
{ 
    $builder 
     ->add('sport', 'entity', array(
      'class'  => 'AppBundle:Sport', 
      'placeholder' => '', 
     )); 
    ; 
    $formModifier = function (FormInterface $form, Sport $sport = null) { 
     $positions = null === $sport ? array() : $sport->getAvailablePositions(); 

     $form->add('position', 'entity', array(
      'class'  => 'AppBundle:Position', 
      'placeholder' => '', 
      'choices'  => $positions, 
     )); 
    }; 

    $builder->addEventListener(
     FormEvents::PRE_SET_DATA, 
     function (FormEvent $event) use ($formModifier) { 
      // this would be your entity, i.e. SportMeetup 
      $data = $event->getData(); 

      $formModifier($event->getForm(), $data->getSport()); 
     } 
    ); 

    $builder->get('sport')->addEventListener(
     FormEvents::POST_SUBMIT, 
     function (FormEvent $event) use ($formModifier) { 
      // It's important here to fetch $event->getForm()->getData(), as 
      // $event->getData() will get you the client data (that is, the ID) 
      $sport = $event->getForm()->getData(); 

      // since we've added the listener to the child, we'll have to pass on 
      // the parent to the callback functions! 
      $formModifier($event->getForm()->getParent(), $sport); 
     } 
    ); 
} } 

而在你的樹枝模板，你可以使用索姆javascript來自動更新形式與新的數據：

{# app/Resources/views/Meetup/create.html.twig #} 
{{ form_start(form) }} 
{{ form_row(form.sport) }} {# <select id="meetup_sport" ... #} 
{{ form_row(form.position) }} {# <select id="meetup_position" ... #} 
{# ... #} 
{{ form_end(form) }} 
<script> 
    var $sport = $('#meetup_sport'); 
    // When sport gets selected ... 
    $sport.change(function() { 
    // ... retrieve the corresponding form. 
var $form = $(this).closest('form'); 
// Simulate form data, but only include the selected sport value. 
var data = {}; 
data[$sport.attr('name')] = $sport.val(); 
// Submit data via AJAX to the form's action path. 
$.ajax({ 
url : $form.attr('action'), 
type: $form.attr('method'), 
data : data, 
success: function(html) { 
    // Replace current position field ... 
    $('#meetup_position').replaceWith(
     // ... with the returned one from the AJAX response. 
     $(html).find('#meetup_position') 
    ); 
    // Position field now displays the appropriate positions. 
    } 
    }); 
}); 
</script> 

欲瞭解更多信息，你可以看到this