Select option focus next

[davelf]

Hi everyone, need help with focus / blur function i guest.

I have 2 select option, select-a and select-b,
After i select the option from select-a, then automatically select-b open the option/dropdown.
Is this possible? I know script using focus and next, base on max-length in input type, but i have no idea how implement it on select option element.

Thanks

[coothead]

Hi there davelf,

probably due to my old age, I am finding it extremely
difficult to comprehend your requirements.

Perhaps you could supply the appropriate HTML code
for which you wish to have JavaScript coding applied.

Even if I am still too befoggled to solve your problem,
the code will still be of benefit to those members who
are probably more accomplished than I.

coothead

[jscheuer1]

Assuming I understand the question -

Well, as long as it's a form element - doesn't even have to be in a form, and you're in luck (maybe, get to that later) because a select is a form element. So you can have it attain focus in javascript like so:

selectelementreference.focus();

However, not so lucky perhaps is that it won't automatically open up just because it has focus. It will appear highlighted or emphasized in some way (varies by browser, and requires that focus is on the page's tab to even see). But there's no way to get it to open up except via user action. You could create an element - say, a list, or a div that you manipulate via javascript to open, and you can make it act a lot like a select element, even have it write its "value" to a hidden select or other form element so that it could be submitted as part of a form.

One thing you can do is manipulate the select's size attribute. If it has 4 options and you set its size to 4, it will show all four options. If you remove the attribute or set it to 1 or an empty string, it will look closed. If you don't know how many options it has or don't want to worry about that each time, you can 'ask it' how many it has:

selectelementreference.size = selectelementreference.options.length;

Then to 'close':

selectelementreference.size = '';

But this doesn't exactly look the same as opening and closing as activated by the user and isn't responsive to the user once you 'open' it. If a select is 'opened' in this manner you must assume complete control of it in the flow of your code or risk having a lot of 'open' selects lying around.

One other thing, when a select's size is increased, it takes up more layout space, so you want to account for that by positioning it absolute and/or putting it in a container that has room for it to grow without pushing other things around.

All in all, I think I would opt for either trusting that the user will get the idea and open it themselves (you could even put a bright border around it or something when it's time for them to pay attention to it), or using an element that you can control more easily and also give select like control to the user for, like a list or a div as I mentioned before.

[davelf]

Hi coothead,
Sorry, I forgot to attach an example of the problem I was trying to accomplish.

I see this feature in one website, link: https://www.traveloka.com/en/
In Hotels Tab, after i choose on "Guest" select option, the "Room" select option show.

I find this code that i think the closest to my needs:
Focus: http://jsfiddle.net/ramseyfeng/8n6rmsx7/2/
But it focus to input type, not select option.

I also find this code, to open select option from a button, but i have no idea how to combine the two:
http://jsfiddle.net/vWx2H/456/

[jscheuer1]

Both of you (David and Coothead), and I might get more specific later, but notice that the key part of the fiddle that "opens" the select is based upon its size attribute as I mentioned. I think that code is a bit overblown (specifically unsure if cloning is necessary), but it has a nice twist I didn't think of. If you set the size attribute to one less than the number of options, it looks even more like an opened-by-the-user select. They also used absolute positioning as I had suggested.