如何使用AJAX和jQuery在Zend Framework 1.12中实现依赖下拉(多重选择)?

如何使用AJAX和jQuery在Zend Framework 1.12中实现依赖下拉(多重选择)?,jquery,zend-framework,Jquery,Zend Framework,我必须实现一个搜索功能,其中使用了相关的下拉列表。我有一个父下拉列表,它显示具有多个选择的级别1选择项,基于父下拉列表上的多个选择,第一个子下拉列表应该从数据库填充 $form['selectform1'] = new Zend_Form_Element_Multiselect('selectform1'); $form['selectform1']->addMultiOption('', 'Select Expertise'); f

我必须实现一个搜索功能,其中使用了相关的下拉列表。我有一个父下拉列表,它显示具有多个选择的级别1选择项,基于父下拉列表上的多个选择,第一个子下拉列表应该从数据库填充

$form['selectform1'] = new Zend_Form_Element_Multiselect('selectform1');
            $form['selectform1']->addMultiOption('', 'Select Expertise');
                foreach ($selectform1options as $selectform1value) {    
                    $form['selectform1']->addMultiOption($selectform1value['id'], $selectform1value['selectform1ooptions']);
                }
            $form['selectform1']->setLabel('Label for select form 1:')->setRequired(); 


            $form['selectform2'] = new Zend_Form_Element_Multiselect('selectform2');
            $form['selectform2']->setLabel('Select form 2:')                                        
                                ->setRegisterInArrayValidator(false);
            $form['selectform2']->addMultiOption('', 'Please select options on select form 1 first');

            $form['selectform3'] = new Zend_Form_Element_Multiselect('selectform3');
            $form['selectform3']->setLabel('Selectform 2:')
                                            ->setAttrib('disabled', 'true')                                            
                                            ->setRegisterInArrayValidator(false);                                            
            $form['selectform3']->addMultiOption('', 'Please select options for select form 2 first');
此第一个子下拉列表中的项目也可以选择多个。基于第一个子下拉列表的多个选择,应该填充第二个子下拉列表,并且第二个子下拉列表上的项目也可以多个选择

$form['selectform1'] = new Zend_Form_Element_Multiselect('selectform1');
            $form['selectform1']->addMultiOption('', 'Select Expertise');
                foreach ($selectform1options as $selectform1value) {    
                    $form['selectform1']->addMultiOption($selectform1value['id'], $selectform1value['selectform1ooptions']);
                }
            $form['selectform1']->setLabel('Label for select form 1:')->setRequired(); 


            $form['selectform2'] = new Zend_Form_Element_Multiselect('selectform2');
            $form['selectform2']->setLabel('Select form 2:')                                        
                                ->setRegisterInArrayValidator(false);
            $form['selectform2']->addMultiOption('', 'Please select options on select form 1 first');

            $form['selectform3'] = new Zend_Form_Element_Multiselect('selectform3');
            $form['selectform3']->setLabel('Selectform 2:')
                                            ->setAttrib('disabled', 'true')                                            
                                            ->setRegisterInArrayValidator(false);                                            
            $form['selectform3']->addMultiOption('', 'Please select options for select form 2 first');
我只能为单选填充下拉列表。但我希望在所有下拉列表上进行多重选择,并相应地进行填充。如果有任何其他方法或形式可以取代此机制,我们也欢迎。

您可能正在寻找

$form['selectform1'] = new Zend_Form_Element_Multiselect('selectform1');
            $form['selectform1']->addMultiOption('', 'Select Expertise');
                foreach ($selectform1options as $selectform1value) {    
                    $form['selectform1']->addMultiOption($selectform1value['id'], $selectform1value['selectform1ooptions']);
                }
            $form['selectform1']->setLabel('Label for select form 1:')->setRequired(); 


            $form['selectform2'] = new Zend_Form_Element_Multiselect('selectform2');
            $form['selectform2']->setLabel('Select form 2:')                                        
                                ->setRegisterInArrayValidator(false);
            $form['selectform2']->addMultiOption('', 'Please select options on select form 1 first');

            $form['selectform3'] = new Zend_Form_Element_Multiselect('selectform3');
            $form['selectform3']->setLabel('Selectform 2:')
                                            ->setAttrib('disabled', 'true')                                            
                                            ->setRegisterInArrayValidator(false);                                            
            $form['selectform3']->addMultiOption('', 'Please select options for select form 2 first');
每次选择父值时,它将以JSON格式从数据库中获取子select元素选项的值。 您可能需要创建一个JSON返回控制器,该控制器应该有以下返回JSON的代码

$this->_helper->json($req_data);
$form['selectform1'] = new Zend_Form_Element_Multiselect('selectform1');
            $form['selectform1']->addMultiOption('', 'Select Expertise');
                foreach ($selectform1options as $selectform1value) {    
                    $form['selectform1']->addMultiOption($selectform1value['id'], $selectform1value['selectform1ooptions']);
                }
            $form['selectform1']->setLabel('Label for select form 1:')->setRequired(); 


            $form['selectform2'] = new Zend_Form_Element_Multiselect('selectform2');
            $form['selectform2']->setLabel('Select form 2:')                                        
                                ->setRegisterInArrayValidator(false);
            $form['selectform2']->addMultiOption('', 'Please select options on select form 1 first');

            $form['selectform3'] = new Zend_Form_Element_Multiselect('selectform3');
            $form['selectform3']->setLabel('Selectform 2:')
                                            ->setAttrib('disabled', 'true')                                            
                                            ->setRegisterInArrayValidator(false);                                            
            $form['selectform3']->addMultiOption('', 'Please select options for select form 2 first');
另外,显然,在所需的DAO中创建一个函数,用于根据参数获取数据

$form['selectform1'] = new Zend_Form_Element_Multiselect('selectform1');
            $form['selectform1']->addMultiOption('', 'Select Expertise');
                foreach ($selectform1options as $selectform1value) {    
                    $form['selectform1']->addMultiOption($selectform1value['id'], $selectform1value['selectform1ooptions']);
                }
            $form['selectform1']->setLabel('Label for select form 1:')->setRequired(); 


            $form['selectform2'] = new Zend_Form_Element_Multiselect('selectform2');
            $form['selectform2']->setLabel('Select form 2:')                                        
                                ->setRegisterInArrayValidator(false);
            $form['selectform2']->addMultiOption('', 'Please select options on select form 1 first');

            $form['selectform3'] = new Zend_Form_Element_Multiselect('selectform3');
            $form['selectform3']->setLabel('Selectform 2:')
                                            ->setAttrib('disabled', 'true')                                            
                                            ->setRegisterInArrayValidator(false);                                            
            $form['selectform3']->addMultiOption('', 'Please select options for select form 2 first');
动态下拉部分中给出的示例显示了您可以使用的类似代码

$('#example2').cascadingDropdown({
selectBoxes: [
    {
        selector: '.step1',
        source: [
            { label: '4.0"', value: 4 },
            { label: '4.3"', value: 4.3 },
            { label: '4.7"', value: 4.7 },
            { label: '5.0"', value: 5 }
        ]
    },
    {
        selector: '.step2',
        requires: ['.step1'],
        source: function(request, response) {
            $.getJSON('/api/resolutions', request, function(data) {
                var selectOnlyOption = data.length <= 1;
                response($.map(data, function(item, index) {
                    return {
                        label: item + 'p',
                        value: item,
                        selected: selectOnlyOption // Select if only option
                    };
                }));
            });
        }
    },
  .. and so on
$form['selectform1'] = new Zend_Form_Element_Multiselect('selectform1');
            $form['selectform1']->addMultiOption('', 'Select Expertise');
                foreach ($selectform1options as $selectform1value) {    
                    $form['selectform1']->addMultiOption($selectform1value['id'], $selectform1value['selectform1ooptions']);
                }
            $form['selectform1']->setLabel('Label for select form 1:')->setRequired(); 


            $form['selectform2'] = new Zend_Form_Element_Multiselect('selectform2');
            $form['selectform2']->setLabel('Select form 2:')                                        
                                ->setRegisterInArrayValidator(false);
            $form['selectform2']->addMultiOption('', 'Please select options on select form 1 first');

            $form['selectform3'] = new Zend_Form_Element_Multiselect('selectform3');
            $form['selectform3']->setLabel('Selectform 2:')
                                            ->setAttrib('disabled', 'true')                                            
                                            ->setRegisterInArrayValidator(false);                                            
            $form['selectform3']->addMultiOption('', 'Please select options for select form 2 first');

在研究和探索javascript之后,我确实解决了这个问题

$form['selectform1'] = new Zend_Form_Element_Multiselect('selectform1');
            $form['selectform1']->addMultiOption('', 'Select Expertise');
                foreach ($selectform1options as $selectform1value) {    
                    $form['selectform1']->addMultiOption($selectform1value['id'], $selectform1value['selectform1ooptions']);
                }
            $form['selectform1']->setLabel('Label for select form 1:')->setRequired(); 


            $form['selectform2'] = new Zend_Form_Element_Multiselect('selectform2');
            $form['selectform2']->setLabel('Select form 2:')                                        
                                ->setRegisterInArrayValidator(false);
            $form['selectform2']->addMultiOption('', 'Please select options on select form 1 first');

            $form['selectform3'] = new Zend_Form_Element_Multiselect('selectform3');
            $form['selectform3']->setLabel('Selectform 2:')
                                            ->setAttrib('disabled', 'true')                                            
                                            ->setRegisterInArrayValidator(false);                                            
            $form['selectform3']->addMultiOption('', 'Please select options for select form 2 first');
第一: 我在Zend上将select表单定义为

$form['selectform1'] = new Zend_Form_Element_Multiselect('selectform1');
            $form['selectform1']->addMultiOption('', 'Select Expertise');
                foreach ($selectform1options as $selectform1value) {    
                    $form['selectform1']->addMultiOption($selectform1value['id'], $selectform1value['selectform1ooptions']);
                }
            $form['selectform1']->setLabel('Label for select form 1:')->setRequired(); 


            $form['selectform2'] = new Zend_Form_Element_Multiselect('selectform2');
            $form['selectform2']->setLabel('Select form 2:')                                        
                                ->setRegisterInArrayValidator(false);
            $form['selectform2']->addMultiOption('', 'Please select options on select form 1 first');

            $form['selectform3'] = new Zend_Form_Element_Multiselect('selectform3');
            $form['selectform3']->setLabel('Selectform 2:')
                                            ->setAttrib('disabled', 'true')                                            
                                            ->setRegisterInArrayValidator(false);                                            
            $form['selectform3']->addMultiOption('', 'Please select options for select form 2 first');
第二: 我使用javascript如下

$form['selectform1'] = new Zend_Form_Element_Multiselect('selectform1');
            $form['selectform1']->addMultiOption('', 'Select Expertise');
                foreach ($selectform1options as $selectform1value) {    
                    $form['selectform1']->addMultiOption($selectform1value['id'], $selectform1value['selectform1ooptions']);
                }
            $form['selectform1']->setLabel('Label for select form 1:')->setRequired(); 


            $form['selectform2'] = new Zend_Form_Element_Multiselect('selectform2');
            $form['selectform2']->setLabel('Select form 2:')                                        
                                ->setRegisterInArrayValidator(false);
            $form['selectform2']->addMultiOption('', 'Please select options on select form 1 first');

            $form['selectform3'] = new Zend_Form_Element_Multiselect('selectform3');
            $form['selectform3']->setLabel('Selectform 2:')
                                            ->setAttrib('disabled', 'true')                                            
                                            ->setRegisterInArrayValidator(false);                                            
            $form['selectform3']->addMultiOption('', 'Please select options for select form 2 first');
$("#selectform2").attr('disabled', 'disabled');
$("#selectform2").hide();
$("#selectform2-label").hide();
$("#selectform3").attr('disabled', 'disabled');
$("#selectform3").hide();
$("#selectform3-label").hide();

$("select[id='selectform1']").click(function() {
    $("#selectform2").attr('disabled', 'disabled');
    $("#selectform2").hide();
    $("#selectform2-label").hide();
    $("#selectform3").attr('disabled', 'disabled');
    $("#selectform3").hide();
    $("#selectform3-label").hide();
    $("select[id='selectform1']").change(function() {
        $("#selectform3").empty();
    });
    var selection_selectform1 = this.value;
    $.ajax({
        type: 'GET',
        url: '<?php echo $this->baseUrl(); ?>/function1',
        data: {
            id: selection_selectform1
        },
        success: function(response) {
            $("#selectform2").removeAttr('disabled');
            $("#selectform2").show();
            $("#selectform2-label").show();
            $("#selectform2").html(response);
        }
    });
});

$("select[id='selectform2']").click(function() {
    $("#selectform3").attr('disabled', 'disabled');
    $("#selectform3").hide();
    $("#selectform3-label").hide();
    var selection_selectform2 = this.value;
    $.ajax({
        type: 'GET',
        url: '<?php echo $this->baseUrl(); ?>/function2',
        data: {
            id: selection_selectform2
        },
        success: function(response) {
            if (response.trim() == 'empty') {
                $("#selectform3").attr('disabled', 'disabled');
                $("#selectform3").hide();
                $("#selectform3-label").hide();
            } else {
                $("#selectform3").removeAttr('disabled');
                $("#selectform3").show();
                $("#selectform3-label").show();
                $("#selectform3").html(response);
            };
        }
    });
}); 

你会在你的问题中编辑你拥有的相关代码吗?在我看来,您只需要a计算出您在菜单中选择了哪些项,b在它们更改时通过AJAX将它们发送到服务器,c重新绘制您的子菜单。我预计更改菜单1将在未选择任何内容的情况下重新绘制菜单2,因此您无需重新计算所有子体中已选择的内容,即菜单3可以删除,直到用户再次从其父级选择内容。感谢insight@halfer