Results 1 to 5 of 5

Thread: Select option focus next

  1. #1
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    471
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default Select option focus next

    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
    _____________________

    David Demetrius // davejob
    _____________________

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    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
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,370
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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:

    Code:
    selectelementreference.size = selectelementreference.options.length;
    Then to 'close':

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    471
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    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/
    _____________________

    David Demetrius // davejob
    _____________________

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,370
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. using IF in Select Option
    By taz in forum ASP
    Replies: 1
    Last Post: 04-26-2010, 02:59 PM
  2. Replies: 6
    Last Post: 01-21-2008, 06:50 AM
  3. width of Select Option
    By u_bighnaraj in forum CSS
    Replies: 0
    Last Post: 12-13-2006, 11:46 AM
  4. Select option drop down
    By cblake843 in forum JavaScript
    Replies: 4
    Last Post: 04-24-2006, 02:54 PM
  5. Populate option of <select>
    By d4d4ng in forum JavaScript
    Replies: 2
    Last Post: 04-10-2006, 02:19 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •