How to display value in custom select field?

1

I have code in js to populate a Select field (populate the options df_property). It works well. I can select the values.

But my problem now is to keep the field displaying the selected value.
After Save, if I reload the page the field is blank.
Examining from the browser console I can see the field has the selected value, but just not displaying it.

The select field kotakabupaten is populated based on selection of another field propinsi:

    propinsi: function ( frm ) {
        frappe.call( {
            method: "frappe.client.get_list",
            args: {
                'doctype': "Wilayah",
                'filters': { 'nama_propinsi': frm.doc.propinsi },
                'fields': [
                    'nama_kota_kab'
                ]
            },
            callback: function( r ) {
                if ( r.message ) {
                    let arrayKokab = [];
                    for ( let i = 0; i < r.message.length; i++ ) {
                        var kokab = r.message[ i ].nama_kota_kab;
                        arrayKokab.push( kokab );
                    }
                    let unikKokab = [ ...new Set( arrayKokab.sort() ) ];
                    frm.set_df_property( 'kotakabupaten', 'options', unikKokab );
                }
            }
        } );
    },

How do I keep displaying the selected value?
I don’t want to change the fieldtype to Data because I want the user to be able to later change the selected value.

Thank you

1 Like
2

If I use refresh as the event trigger (instead of propinsi) the value is displayed. But the population is not working.

3

Instead of using

frm.set_df_property( 'kotakabupaten', 'options', unikKokab );

I change the code to use

set_field_options("kotakabupaten", unikKokab);

but the problem remains: the field doesn’t display the selected value (it does keep the value in database which can be seen with console.log)

Can anyone please suggest what I should do?
Thank you

4

I use several fields for this selections (similar code with relevant fieldnames):

Choose propinsi → populate the kotakabupaten;
choose kotakabputan → populate kecamatan;
choose kecamatan → populate kelurahan;
choose kelurahan → fill the kodepos field.

The problem is with the second field and after.
After a page reload the propinsi is displayed, but not kotakabupaten and after.
If I rechoose the propinsi, the kotakabupaten displays the value. The same with other fields.

So I guess this is the problem of using fieldname as event trigger. The fieldname triggers when there is a change in the field. A reload is not considered as change so nothing happen in the subsequent fields.

What do I miss?

EDIT:
After trying this and that I add the same code but with refresh event trigger.
And it works!

Now, to have a shorter code, is it any way to have multi event triggers?
something like:

refresh && propinsi: function(frm) {}
5

common function called by different events.