javascript - Symfony 2 - 根据另一个字段中的选择动态隐藏字段

Question

我搜索了很多，但找不到这个相当简单的问题的答案:

在 Symfony 2.8 中，我有一个表单，它呈现一个国家/地区字段。根据它的选择，我想仅为选择“德国”(数据“D”)显示邮政编码和联邦州字段。这是国家/地区字段的代码:

                ->add('nationveranstaltungsort', ChoiceType::class, array(
                    'choices' => array(
                        'D' => 'Deutschland',
                        'AFG' => 'Afghanistan',
//many other countries following                   
                    ),
                    'data' => 'D',
                    'label' => 'Nation Tagungsstätte'))

它预先填充了选项“Deutschland”，数据“D”。

基于我想动态显示:

->add('plzveranstaltungsort', TextType::class, array('label' => 'PLZ', 'attr' => array('size' => '5', 'maxlength' => '5')))
                ->add('bundeslandveranstaltungsort', ChoiceType::class, array(
                    'choices' => array(
                        0 => '     ',
                        1 => 'Baden-Württemberg',
                        2 => 'Bayern',
                        3 => 'Berlin',
                        4 => 'Brandenburg',
                        5 => 'Bremen',
                        6 => 'Hamburg',
                        7 => 'Hessen',
                        8 => 'Mecklenburg-Vorpommern',
                        10 => 'Nordrhein-Westfalen',
                        11 => 'Rheinland-Pfalz',
                        12 => 'Saarland',
                        13 => 'Sachsen',
                        14 => 'Sachsen-Anhalt',
                        15 => 'Schleswig-Holstein',
                        16 => 'Thüringen',
                    ),
                    'data' => 0,
                    'label' => 'Bundesland Tagungsstätte'))

如果未选择“Deutschland”，我只想隐藏/禁用这些字段(并在其他地方处理空值)。

我试过http://symfony.com/doc/current/form/dynamic_form_modification.html以及其他一些javascript的东西，但由于我基本上不懂任何JS，所以我找不到任何合适的资源。

Answer 1

由于默认情况下 nationveranstaltungsort 字段选择了德国，因此无需隐藏 plzveranstaltungsort。您可以使用以下内容隐藏在 Javascript 中:

var bund = document.getElementById("bundeslandveranstaltungsort");
bund.style.display = "none";

然后显示元素使用:

bund.style.display = "inline";

根据您使用的 CSS，您可能需要使用:

bund.style.display = " block ";

在表单中，您可以指定一个属性来在更改时运行 Javascript 函数，如下所示:

->add('nationveranstaltungsort', ChoiceType::class, array(
    'choices' => array(
        'D' => 'Deutschland',
        'AFG' => 'Afghanistan',
    ),
    'data' => 'D',
    'label' => 'Nation Tagungsstätte',
    'attr' => array(
            'onchange' => 'changeCountry()',
    ),
))

然后在 Javascript 函数 changeCountry() 中隐藏元素或使用上面的方法显示它。 我显示的 ids 实际上并不是您将使用的，但如果您使用浏览器工具，例如在 Firefox 中(我建议使用 FireFox 进行测试)，您可以右键单击选择元素并选择“检查元素”；然后您可以看到您需要使用的“实际”id 值是什么。这取决于您的表单名称。