3

Zend Framework2 を使用していますが、Zend に 2 つの依存ドロップダウンを設定するのが難しいため、カテゴリを選択すると、システムは 2 番目の選択要素に適切なデータを入力します。そのためにAjaxを使用していることは知っていますが、どうすればよいかわかりません。

私のフォームは次のようになります。

$this->add(array(
            'type' => 'Zend\Form\Element\Select',
            'name' => 'categ_event',
            'options' => array(
                    'label' => 'Event category ',
                    'style' => 'display:none;',
                    'value_options' => array(
                                                ),
            ),

    ));

    $this->add(array(
            'type' => 'Zend\Form\Element\Select',
            'name' => 'type_incident',
            'options' => array(
                    'label' => 'Incident type',
                    'style' => 'display:none;',
                    'value_options' => array(
                                                ),
            )));

コントローラー クラスに要素を入力していることに注意してください。これはコードです：

$form->get('categ_event')->setValueOptions(
                $this->getTableInstance('CategEventTable')
                ->getListCateg());
        $form->get('type_incident')->setValueOptions(
                $this->getTableInstance('TypeIncidentTable')
                ->getListTypeIncident());

では、Ajax を使用して、categ_event の変更イベントで 2 番目の選択要素を埋めるにはどうすればよいでしょうか。

ありがとう ！

4

1 に答える 1

3

私はあなたの懸念を正しく理解していることを願っています:

  • 2 つの選択フィールドがあります
  • フィールド 1 に複数のカテゴリが含まれていることを選択
  • SF1 が選択した内容に応じて、[フィールド 2 にデータを含める] を選択します。

上記の状況を考慮して、私はあなたに私の解決策を提示します。秘密は、選択要素をレンダリングする方法にあります。基本的に、次のような出力が必要です。

<select id="category-list">
    <option value="1">Foo</option>
    <option value="2">Hello</option>
</select>

<select id="dependant-list">
    <option value="1" data-category="1">Bar</option>
    <option value="2" data-category="1">Baz</option>
    <option value="3" data-category="2">World</option>
    <option value="4" data-category="2">User</option>
</select>

それらはほとんど手動でレンダリングします。次に、単純な JQuery が続きます。

var s1 = $('#category-list');
var s2 = $('#dependant-list');

//Hide all of Select List 2
var dependantOptions = s2.find('option');
    dependantOptions.css('visibility', 'hidden');

s1.on('change', function() {
    dependantOptions.css('visibility', 'hidden');
    s2.find("option[data-category='" + $(this).val() + "']").css('visibility', 'visible');
});

を使用すると、最後の行s2.find()がより最適化される可能性がありますがdependantOptions、それが今どのように機能するかは頭の中でわかりません...

さらに、使用する代わりに、visibility:hidden/visibleあなたが好むかもしれませんdisplay:none/inline

于 2013-08-06T10:23:18.687 に答える