Dependent on Dropdown

karlie

Hi, in Editor I have some fields that I only want displayed when a dropdown value has been selected. I have found and implemented the code for this

//Price Fields in Editor
    editor.dependent( 'type', function ( val ) {
        return val === 'EACH' ?
          { hide: ['gram_price', 'ct', 'ppct', 'gram_price', 'gram_weight', 'set_price', 'lot_price', 'pair_price', 'kilo_weight', 'kilo_price', 'box_price'] } :
          { show: ['each_price'] };
    } );

However, when I try and add another dependent value such as

//Price Fields in Editor
    editor.dependent( 'type', function ( val ) {
        return val === 'PCT' ?
          { hide: ['gram_price', 'each_price', 'gram_price', 'gram_weight', 'set_price', 'lot_price', 'pair_price', 'kilo_weight', 'kilo_price', 'box_price'] } :
          { show: ['ct', 'ppct'] };
    } );

The editor window loads both of these, irrespective of what I select in the dropdown.

allan

Its dependent on the same field's value (type) and it is showing an hiding different fields. Is that want you want? I don't quite get that I'm afraid.

Allan

karlie

Sorry if I wasn't clear I want fields to be visible dependent upon the selection made in the select dropdown. The select is named 'type'

If I select the first value from the select I want 1 field to appear.
If I select the second value from the select I want 2 different fields to appear
etc etc

karlie

So my code looked like this:

//Price Fields in Editor
    editor.dependent( 'type', function ( val ) {
        return val === 'EACH' ?
          { hide: ['gram_price', 'ct', 'ppct', 'gram_price', 'gram_weight', 'set_price', 'lot_price', 'pair_price', 'kilo_weight', 'kilo_price', 'box_price'] } :
          { show: ['each_price'] };
    } );

 editor.dependent( 'type', function ( val ) {
        return val === 'PCT' ?
          { hide: ['gram_price', 'each_price', 'gram_price', 'gram_weight', 'set_price', 'lot_price', 'pair_price', 'kilo_weight', 'kilo_price', 'box_price'] } :
          { show: ['ct', 'ppct'] };
    } );

This caused the form to 'bounce around' displaying and hiding fields!

allan

You want to combine the two dependent calls together since they are both for the field type:

    editor.dependent( 'type', function ( val ) {
        if ( val === 'EACH' ) {
            return {
                hide: ...,
                show: ...
            };
        }
        else if ( val === 'PCT' ) {
            return {
                hide: ...,
                show: ...
            };
        }
        else {
            ...
        }
    } );

At the moment you have the two functions running together, which is almost certainly not what you want.

Allan

karlie

Ah great thanks!