Question

我必须实现一个使用相关下拉列表的搜索功能。我有一个父下拉列表，显示具有多个选择的1级选择项目，根据父下拉列表上的多个选择，应从数据库中填充第一个子下拉列表。

此第一个子下拉菜单上的项目也可以多次选中。基于多个第一个孩子下拉选择，应该填充第二个孩子下拉列表，并且第二个孩子下拉列表中的项目也可以多次选择。

我已经能够仅为单个选择填充下拉列表。但是我希望在所有下拉菜单上进行多项选择并相应地填充。如果有任何其他方法或形式可以取代这种机制，也欢迎。

Answer 1

每次选择父值时，它将从数据库（JSON格式）中获取子选择元素选项的值。您可能必须创建一个JSON返回控制器，该控制器应具有以下用于返回JSON的代码

$this->_helper->json($req_data);

另外，显然，在所需的DAO中创建一个函数，用于根据参数获取数据。

动态下拉部分中的示例显示了您可以使用的类似代码。

$('#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

Answer 2

我在做了一些研究和探索javascript后确实解决了这个问题。

第一：我在Zend上定义了选择表单

$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如下。

$("#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);
            };
        }
    });
});

如何使用AJAX和jQuery在Zend Framework 1.12中实现依赖下拉（多选）？

2 个答案: