如何使用AJAX和jQuery在Zend Framework 1.12中实现依赖下拉(多重选择)?
我必须实现一个搜索功能,其中使用了相关的下拉列表。我有一个父下拉列表,它显示具有多个选择的级别1选择项,基于父下拉列表上的多个选择,第一个子下拉列表应该从数据库填充如何使用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
$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