1
goffy
Cascading form select
  • 2023/1/31 6:50

  • goffy

  • Just can't stay away

  • Posts: 544

  • Since: 2010/12/27


I want to show you a new best practice example: Cascading FormSelect

Sometimes you want, that the choice of the first selectbox adapt the possible options of the second selectbox.
After playing around a little bit I decided to implement https://github.com/geekonjava/FilterSelect

I created a new Formselect class (see https://github.com/XoopsModules25x/wgsimpleacc/blob/master/class/Form/FormSelectCascading.php )

The call is similar to call of XoopsFormSelect:
// Get Theme Form
    
\xoops_load('XoopsFormLoader');
    
$form = new \XoopsThemeForm('My form for testing cascading select''formTest',  $_SERVER['REQUEST_URI'], 'post'true);
    
$form->setExtra('enctype="multipart/form-data"');

    
$myExampleTray1 = new XoopsFormElementTray('Example Tray 1');
    
$mySelect1 = new XoopsModules\Wgsimpleacc\Form\FormSelectCascading('Caption Select 1''select1''2'15);
    
$mySelect1->setType(1);
    
$arrSelect1 = [
                    [
'id' => '1''text'=>'Sourceelement 1''rel'=> '0''init'=> '0'],
                    [
'id' => '2''text'=>'Sourceelement 2''rel'=> '0''init'=> '0'],
                    [
'id' => '3''text'=>'Sourceelement 3''rel'=> '0''init'=> '0'],
                  ];
    
$mySelect1->setCustomOptions($arrSelect1);
    
$myExampleTray1->addElement($mySelect1);

    
$mySelect2 = new XoopsModules\Wgsimpleacc\Form\FormSelectCascading('Caption Select 2''select2''4'15);
    
$mySelect2->setType(2);
    
$arrSelect2 = [
                    [
'id' => '1''text'=>'Targetelement 1, linked to Sourceelement 1''rel'=> '1''init'=> '2'],
                    [
'id' => '1''text'=>'Targetelement 1, linked to Sourceelement 2''rel'=> '2''init'=> '2'],
                    [
'id' => '1''text'=>'Targetelement 1, linked to Sourceelement 3''rel'=> '3''init'=> '2'],
                    [
'id' => '2''text'=>'Targetelement 2, linked to Sourceelement 1''rel'=> '1''init'=> '2'],
                    [
'id' => '3''text'=>'Targetelement 3, linked to Sourceelement 1''rel'=> '1''init'=> '2'],
                    [
'id' => '3''text'=>'Targetelement 3, linked to Sourceelement 3''rel'=> '3''init'=> '2'],
                    [
'id' => '4''text'=>'Targetelement 4, linked to Sourceelement 2''rel'=> '2''init'=> '2'],
                    [
'id' => '5''text'=>'Targetelement 5, linked to Sourceelement 2''rel'=> '2''init'=> '2'],
                  ];
    
$mySelect2->setCustomOptions($arrSelect2);
    
$myExampleTray1->addElement($mySelect2);
    
$form->addElement($myExampleTray1);
    
$form->addElement(new \XoopsFormHidden('op''save'));
    
$form->addElement(new \XoopsFormButtonTray(''_SUBMIT'submit'''false));
    
$GLOBALS['xoopsTpl']->assign('form'$form->render());


if you now click on 'Sourceelement 1' in first select then you see only
- 'Targetelement 1, linked to Sourceelement 1'
- 'Targetelement 2, linked to Sourceelement 1'
- 'Targetelement 3, linked to Sourceelement 1'
in second select

have fun
Goffy

2
Mage
Re: Cascading form select
  • 2023/1/31 18:49

  • Mage

  • Core Developer

  • Posts: 209

  • Since: 2009/8/2 1


Thanks for sharing, it's very interesting!

3
Mamba
Re: Cascading form select
  • 2023/2/1 8:14

  • Mamba

  • Moderator

  • Posts: 11412

  • Since: 2004/4/23


Cool! Thanks for sharing!
Support XOOPS => DONATE
Use 2.5.11 | Docs | Modules | Bugs

Login

Who's Online

167 user(s) are online (72 user(s) are browsing Support Forums)


Members: 0


Guests: 167


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Dec 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits