filter select based on selected value from another field

crush123

example

I have an editor form with several select lists, one of which has pricing options which need to be filtered, depending on the value of the item type selected

i would like to restrict the pricing options available when the item type has been selected.

(using Editor 1.3.3)

allan

Hi,

It sounds like you want to use the select field type's update() method. Using this option you can change the values that are available in the list. You need to know when to update them, which would be triggered by an event handler on whatever field is causing the update - likely you might use something like:

$('input', editor.field('myField').node()).keyup( function () {
  var val = editor.field('myField').val();
  if ( val == 1 ) {
    editor.field('mySelect').update( ... );
  }
  else if ( val == 2 ) {
    editor.field('mySelect').update( ... );
  }
  ...
} );

v1.4 will introduce a new dependent method which will make this kind of thing a bit easier.

Allan

crush123

Thanks for ultrafast reply.

Will give it a try and feed back.

crush123

sorry, can't get this to work.

i have taken it back a few steps, so to start with, all i want to do is run the update method successfully.

My select lists are all loaded as follows, after initialising the datatable...

initComplete: function ( settings, json ) {
        // Populate the site select lists with the data available in the
        // database on load
        editor.field( 'tblitem.ItemPatronID' ).update( json.tblpatron );
        editor.field( 'tblitem.ItemSizeID' ).update( json.refsize );
        editor.field( 'tblitem.ItemSchoolID' ).update( json.refschool );
        editor.field( 'tblitem.ItemGenderID' ).update( json.refgender );
        editor.field( 'tblitem.ItemTypeID' ).update( json.refitemtype );
        }

if i comment out one of these, eg the ItemSizeID and then run the update after editor is initalised

editor.field('tblitem.ItemSizeID').update( [
'1', '2', '3', '4', '5', '6'

] );

then the size select list is updated, but otherwise, nothing happens.

sorry for being a noob, but i'm struggling here

allan

then the size select list is updated, but otherwise, nothing happens.

I'm probably missing something, but what else were you expecting to happen?

Allan

crush123

sorry, not being clear.

if the editor list is populated from the json source, the update method doesn't do anything (or it does it before the json update)

if i comment out the json update, it works

allan

I see, so the update is occurring before the initComplete function is called, and therefore when it is called it overwrites any changes that you have made?

Either you could move the update into initComplete after the updates there, or disable the updates there perhaps?

Allan

crush123

Ok, i have disabled the line which populates the refsize editor field

after the initComplete block, i add

editor.field('tblitem.ItemSizeID').update( [
    'Mr', 'Ms', 'Mrs', 'Miss'
    ] );

the refsize select is populated with the new values. - great

if i wrap this with some of the code you kindly supplied me with

        $('input', editor.field('tblitem.ItemSchoolID').node()).keyup( function () {
    editor.field('tblitem.ItemSizeID').update( [
    'Mr', 'Ms', 'Mrs', 'Miss'
    ] );
    } );

I hoped that the refsize select would be empty of values, but populate as soon as i selected the SchoolID , but nothing happens

allan

Can you link me to the page you are working on so I can debug it please. I'm not sure at the moment why is it not working. Is tblitem.ItemSchoolID a text input?

Allan

crush123

Thanks Allan,

tblitem.ItemSchoolID is a select list, pulled from my json data source.

It isn't really relevant to this example, I just chose one of the select fields at random to try and get it to work.

http://test2.forthwebsolutions.com/plugins/shop/stocklist.php

allan

I see - thanks for the link. So it isn't working at the moment as the input select used in the code above isn't going to find anything, since the input for that field is a select element.

Try:

    $('select', editor.field('tblitem.ItemSchoolID').node()).change(function() {
        editor.field('tblitem.ItemSizeID').update([
            'Mr', 'Ms', 'Mrs', 'Miss'
        ]);
    });

Note the change to listening for the change event as well.

Hopefully that will do the business!

Allan

crush123

Aha, gotcha .

Appreciate your patience.

So many features, so much to learn

Thanks again