ZF2-如何在Zend表單上使用Ajax設置依賴下拉菜單

Question

我正在使用Zend Framework2，並且我有一些困難在我的Zend上設置了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的change事件的第二個select元素。

謝謝！

Answer 1

我希望我正確地理解您的擔心：

• 你有兩個選擇字段
• 選擇字段1包含幾個分類
• 選擇字段2應包含的數據，取決於什麼SF1已經選擇

鑑於上述情況，我會向您介紹我的解決方案。祕密就在於你如何渲染選擇元素，基本上你想類似這樣的輸出：

<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