Auto select first value of a multiple dynamic dropdown

stoyleg · April 12, 2021, 7:07pm

I figured this would be straight forward but nothing I try seems to work…

I have 3 simple dependent dynamic select menus (all set to multiple) and I want to automatically select the first value in each after the page loads.

The menus have the following IDs - level1_id, level2_id, ma_id

I’ve tried using the ‘Set Selected Index’ under Dynamic Events, setting this to zero on page load, e.g…

<body dmx-on:load="form1.level1_id.setSelectedIndex(0)">

But this doesn’t work.

I’ve also tried setting the selected index on the actual select elements themselves but the events all require some kind of interaction - click, hover etc.

I’ve also tried adding a bit of jquery but this has no effect either, e.g…

$('#level1_id').val($('#level1_id option').eq(0).val());

Does anyone know why this isn’t working?

Any help is very much appreciated.

Teodor · April 12, 2021, 7:11pm

So are they dependant or not? If they are, then you need to select the value of the first one only, right?
Also - do they have a static 'select an option' option added to them?

stoyleg · April 12, 2021, 7:14pm

Thanks for the quick reply!

Yes they are dependent and, ideally I want to select the first value in each when the page loads.

They do not have a static option.

Teodor · April 12, 2021, 7:19pm

Well how would you select the first option for all the menus if they are dependent?

stoyleg · April 12, 2021, 7:38pm

I was thinking once the options have loaded in the first dropdown (and the first value was auto selected) the options in the next dependent dropdown would load and so on. I figured there must be a way to auto select the first option in a dropdown once it’s been populated (like the ‘selected’ property of a static dropdown).

Maybe I’m wrong though.

But I still can’t get the first dropdown to work which would at least be something.

Teodor · April 12, 2021, 7:40pm

Are the options in the 3 dropdowns coming from the same server action or are these separate server actions?

stoyleg · April 12, 2021, 7:41pm

They are separate but I could potentially combine them into one.

Teodor · April 12, 2021, 7:45pm

Well it’s better if they are separate.
So it should be working perfectly fine. When the first select loads then its first option will be selected, and then it will filter the other server action.
What is the issue then? What exactly is not working as you expect it to?
Are you sure you are filtering the database queries in the server actions correctly?

stoyleg · April 12, 2021, 7:48pm

The dependencies are all working fine, it’s just not selecting the first value when I load the page, even though I have specified the selectedIndex on page load.

In the following screenshot the ‘DKI Jakarta’ value should be selected…