Dependent() - Show/Hide only certain values depending on first selected value

Capamania

I have a working dependent() in my editor form, which looks like this:

editor.dependent( 'account_sectors2.sector_id', function ( val ) {
        return ( val == null ) ?
            { hide: ['account_sectors3.sector_id'] } :
            { show: ['account_sectors3.sector_id'] };  
    } );

In addition to show/hide the select field, I want to show/hide only certain values of the second select option values depending on the first selected value. E.g. if 'Agriculture, Forestry, Fishing and Hunting' is selected, only e.g.:

Animal Production and Aquaculture
Crop Production
Forestry and Logging

should be visible and able to be selected in the second field ... and so on. How can this be done and can somebody provide an example?

The json looks like this:

{
   "data":[
    ...
   ],
   "options":{
      "account_sectors2.sector_id":[
         {
            "label":"Agriculture, Forestry, Fishing and Hunting",
            "value":"11"
         },
         {
            "label":"Construction",
            "value":"23"
         },
         {
            "label":"Manufacturing",
            "value":"31-33"
         },
         {
            "label":"Mining, Quarrying, and Oil and Gas Extraction",
            "value":"21"
         },
         {
            "label":"Utilities",
            "value":"22"
         }
      ],
      "account_sectors3.sector_id":[
         {
            "label":"Animal Production and Aquaculture",
            "value":"112"
         },
         {
            "label":"Apparel Manufacturing",
            "value":"315"
         },
         {
            "label":"Beverage and Tobacco Product Manufacturing",
            "value":"312"
         },
         {
            "label":"Chemical Manufacturing",
            "value":"325"
         },
         {
            "label":"Computer and Electronic Product Manufacturing",
            "value":"334"
         },
         {
            "label":"Construction of Buildings",
            "value":"236"
         },
         {
            "label":"Crop Production",
            "value":"111"
         },
         {
            "label":"Electrical Equipment, Appliance, and Component Manufacturing",
            "value":"335"
         },
         {
            "label":"Fabricated Metal Product Manufacturing",
            "value":"332"
         },
         {
            "label":"Fishing, Hunting and Trapping",
            "value":"114"
         },
         {
            "label":"Food Manufacturing",
            "value":"311"
         },
         {
            "label":"Forestry and Logging",
            "value":"113"
         }
      ]
   },
   "files":[

   ],
   "draw":1,
   "recordsTotal":"20",
   "recordsFiltered":"20"
}

allan

Hi,

It looks like you've already got a good grasp of how Editor's dependent() method works. You'd basically apply that same knowledge to the second field that you also want to have dependencies on.

Allan

Capamania

Mmmh ... I don't understand how though. As of right now, each time if I select a value of the first select e.g. (11, 23, 31-33, ...) I get ALL the select options of the second. But what I want e.g. is this:

Values:

11
|_111
|_112
|_113
|_114

23
|_236

31-33
|_311
|_312
|_315
|_325
|_332
|_334
|_335

allan

Are the options coming from a database? It sounds like you need to apply a where filter.

Allan

Capamania

Yes, they do. I tried this as well (actually first :-) ) ... so just for testing, what works is e.g. this ...

        Field::inst( 'account_sectors2.sector_id' )
            ->options( 'sectors2', 'NaicsCode2', 'NaicsTitle2' ),       
        Field::inst( 'sectors2.NaicsTitle2' ),                
        Field::inst( 'account_sectors3.sector_id' )
            ->options( 'sectors3', 'NaicsCode3', 'NaicsTitle3', function ($q) {
                $q->where( 'sectors3.NaicsCode3', 111, '=' );
            } 
        ),      
        Field::inst( 'sectors3.NaicsTitle3' ), 

... but obviously I get only and everytime value '111' as second select option. What I'm having trouble with now, how can I get the 1st selected value into the where condition of the 2nd option? I tried this:

$q->where( 'sectors3.NaicsCode3', 'sectors2.NaicsCode2', '=' );

... yet, with that I don't have any select option available for the second select. Obviously probably because I'm comparing 2-digit with 3-digit value. So I tried this:

$q->where( 'sectors3.NaicsCode3', 'sectors2.NaicsCode2%', 'LIKE' );

... where I hoped that it returns all 3-digit values where the first 2 digits match the first selected option value (similar to https://editor.datatables.net/manual/php/joins). Which is exactly what I want, but didn't work though. I also tried to 'add' a digit to the first selected value to be able to compare ... but not sure how that should look like ... this didn't work as well

$q->where( 'sectors3.NaicsCode3', 'sectors2.NaicsCode2'+1, '>=' );

allan

The Editor PHP class won't help with dependent options I'm afraid. When you use dependent() to make an Ajax request to get the list of options, you need to point it to a custom script that will query the database based on the value that is selected. That is not something that Editor does.

Regards,
Allan

Capamania

Thanks Allan. By any chance, how would a custom script look like in this case? Regards

allan

You basically need to do a SELECT from the database, getting the labels you want for the label and value in the select list, with an appropriate WHERE statement. Then return that as JSON.

I'm afraid I don't currently have an example script for that.

Allan