zend framework 3 ajax 调整 select 选项
zend framework 3 ajax adjust select options
我刚开始使用 Zend Framework 3。我正在努力解决一个更高级的问题。
我有 selectlist one
选项 1 和 2
我有 selectlist two
选项 1、2、3 和 4。
当在 selectlist one
中选择选项 1 时,只有选项 1 和 2 必须在 selectlist two
中可见。选择选项 2 时,然后选择选项 3 和 4。
如何在 Zend Form 中做到这一点?
您可以使用 "disable_inarray_validator" 选项,这样表单就不会检查 value_options 数组中的值。您也可以检查 post 值并修改表单。视实际问题而定。
我用JQuery解决了它:
//array categorieen en rubrieken
var rubrieken = [
//Nog geen keuze gemaakt
'<option value="0">Selecteer een optie</option>',
//Categorie 1
'<option value="10">Rubriek 10</option><option value="20">Rubriek 20</option>',
//Categorie 2
'<option value="30">Rubriek 30</option><option value="40">Rubriek 40</option>'
];
$( document ).ready(function() {
//Alleen stap 1 laten zien (als die niet al gevuld is)
$( "#stap2" ).hide();
//Bij keuze categorie de rubrieken vullen
$("#select1").change(function(){
var selectedValue = $(this).val();
if(selectedValue){
var getOptions = rubrieken[selectedValue];
$('select#select2').html(getOptions);
$('#select2').hide().fadeIn('slow');
}
});
});
我刚开始使用 Zend Framework 3。我正在努力解决一个更高级的问题。
我有 selectlist one
选项 1 和 2
我有 selectlist two
选项 1、2、3 和 4。
当在 selectlist one
中选择选项 1 时,只有选项 1 和 2 必须在 selectlist two
中可见。选择选项 2 时,然后选择选项 3 和 4。
如何在 Zend Form 中做到这一点?
您可以使用 "disable_inarray_validator" 选项,这样表单就不会检查 value_options 数组中的值。您也可以检查 post 值并修改表单。视实际问题而定。
我用JQuery解决了它:
//array categorieen en rubrieken
var rubrieken = [
//Nog geen keuze gemaakt
'<option value="0">Selecteer een optie</option>',
//Categorie 1
'<option value="10">Rubriek 10</option><option value="20">Rubriek 20</option>',
//Categorie 2
'<option value="30">Rubriek 30</option><option value="40">Rubriek 40</option>'
];
$( document ).ready(function() {
//Alleen stap 1 laten zien (als die niet al gevuld is)
$( "#stap2" ).hide();
//Bij keuze categorie de rubrieken vullen
$("#select1").change(function(){
var selectedValue = $(this).val();
if(selectedValue){
var getOptions = rubrieken[selectedValue];
$('select#select2').html(getOptions);
$('#select2').hide().fadeIn('slow');
}
});
});