我有一个过滤器表单,我想在多选下拉列表中应用。所以有一个"申请"过滤器的按钮,当点击它时,我想根据过滤器选项更新下拉列表中的值。 (我的表单上还有其他字段/值,在更新下拉列值时不应该消失。)
我完全不知道如何实现这一目标。也许一个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'} ));
}
答案 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。