Is it possible to use JS to open an HTML select to show its option list

Question

Is it possible to use JavaScript to open an HTML select to show its option list

User · Answer

After trying to solve this issue for some time, I managed to come with a working solution that is also valid:

var event = new MouseEvent('mousedown');
element.dispatchEvent(event);

I've tried to implement this in Jquery as well, using trigger and mousedown or only mousedown but with no success.

User · Answer

I use this    but it requires the user to click on the select box     Here are the 2 javascript functions  function expand obj        obj size   5    function unexpand obj        obj size   1      then i create the select box   lt select id  test  multiple  multiple  name  foo  onFocus  expand this   onBlur  unexpand this   gt   lt option  gt option1 lt  option gt   lt option  gt option2 lt  option gt   lt option  gt option3 lt  option gt   lt option  gt option4 lt  option gt   lt option  gt option5 lt  option gt   lt  select gt     I know this code is a little late  but i hope it helps someone who had the same problem as me   ps fyi  i have not tested the code above  i create my select box dynamically   and the code i did write was only tested in FireFox

User · Answer

This is very late  but I thought it could be useful to someone should they reference this question  I beleive the below JS will do what is asked     lt script gt                  document  ready function                          document getElementById  select   size 3                      lt  script gt

User · Answer

use jquery  select trigger  mousedown

User · Answer

I m fairly certain the answer is  No  You can select options with JavaScript but not open the select  You d have to use a custom solution

User · Answer

lt select id  myDropDown  gt     lt option gt html5 lt  option gt     lt option gt javascript lt  option gt     lt option gt jquery lt  option gt     lt option gt css lt  option gt     lt option gt sencha lt  option gt   lt  select gt    By jQuery   var myDropDown     myDropDown    var length       myDropDown gt  option   length    open dropdown myDropDown attr  size  length     close dropdown myDropDown attr  size  0     By javascript   var myDropDown document getElementById  myDropDown    var length   myDropDown options length    open dropdown myDropDown size   length    close dropdown myDropDown size   0    Copied from  Open close select

User · Answer

This works on Google Chrome  dropDown   function  elementId        var dropdown   document getElementById elementId       try           showDropdown dropdown         catch e               return false      showDropdown   function  element        var event      event   document createEvent  MouseEvents        event initMouseEvent  mousedown   true  true  window       element dispatchEvent event

User · Answer

Unfortunately there s a simple answer to this question  and it s  No

User · Answer

The solution I present is safe  simple and compatible with Internet Explorer  FireFox and Chrome    This approach is new and complete  I not found nothing equal to that solution on the internet  Is simple  cross-browser  Internet Explorer  Chrome and Firefox   preserves the layout  use the select itself and is easy to use   Note  JQuery is required   HTML CODE   lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt CustonSelect lt  title gt   lt script type  text javascript  src    jquery-1 3 2 js  gt  lt  script gt   lt script type  text javascript  src    CustomSelect js  gt  lt  script gt   lt  head gt   lt div id  testDiv  gt  lt  div gt   lt body gt       lt table gt           lt tr gt               lt td gt                   lt select id  Select0   gt                       lt option value  0000  gt 0000 lt  option gt                       lt option value  0001  gt 0001 lt  option gt                       lt option value  0002  gt 0002 lt  option gt                       lt option value  0003  gt 0003 lt  option gt                       lt option value  0004  gt 0004 lt  option gt                       lt option value  0005  gt 0005 lt  option gt                       lt option value  0006  gt 0006 lt  option gt                       lt option value  0007  gt 0007 lt  option gt                       lt option value  0008  gt 0008 lt  option gt                       lt option value  0009  gt 0009 lt  option gt                       lt option value  0010  gt 0010 lt  option gt                       lt option value  0011  gt 0011 lt  option gt                       lt option value  0012  gt 0012 lt  option gt                       lt option value  0013  gt 0013 lt  option gt                       lt option value  0014  gt 0014 lt  option gt                       lt option value  0015  gt 0015 lt  option gt                       lt option value  0016  gt 0016 lt  option gt                       lt option value  0017  gt 0017 lt  option gt                       lt option value  0018  gt 0018 lt  option gt                       lt option value  0019  gt 0019 lt  option gt                       lt option value  0020  gt 0020 lt  option gt                       lt option value  0021  gt 0021 lt  option gt                       lt option value  0022  gt 0022 lt  option gt                       lt option value  0023  gt 0023 lt  option gt                       lt option value  0024  gt 0024 lt  option gt                       lt option value  0025  gt 0025 lt  option gt                       lt option value  0026  gt 0026 lt  option gt                       lt option value  0027  gt 0027 lt  option gt                       lt option value  0028  gt 0028 lt  option gt                       lt option value  0029  gt 0029 lt  option gt                       lt option value  0030  gt 0030 lt  option gt                       lt option value  0031  gt 0031 lt  option gt                       lt option value  0032  gt 0032 lt  option gt                       lt option value  0033  gt 0033 lt  option gt                       lt option value  0034  gt 0034 lt  option gt                       lt option value  0035  gt 0035 lt  option gt                       lt option value  0036  gt 0036 lt  option gt                       lt option value  0037  gt 0037 lt  option gt                       lt option value  0038  gt 0038 lt  option gt                       lt option value  0039  gt 0039 lt  option gt                       lt option value  0040  gt 0040 lt  option gt                   lt  select gt               lt  td gt           lt  tr gt           lt tr gt               lt td gt                   lt select id  Select1   gt                       lt option value  0000  gt 0000 lt  option gt                       lt option value  0001  gt 0001 lt  option gt                       lt option value  0002  gt 0002 lt  option gt                       lt option value  0003  gt 0003 lt  option gt                       lt option value  0004  gt 0004 lt  option gt                       lt option value  0005  gt 0005 lt  option gt                       lt option value  0006  gt 0006 lt  option gt                       lt option value  0007  gt 0007 lt  option gt                       lt option value  0008  gt 0008 lt  option gt                       lt option value  0009  gt 0009 lt  option gt                       lt option value  0010  gt 0010 lt  option gt                       lt option value  0011  gt 0011 lt  option gt                       lt option value  0012  gt 0012 lt  option gt                       lt option value  0013  gt 0013 lt  option gt                       lt option value  0014  gt 0014 lt  option gt                       lt option value  0015  gt 0015 lt  option gt                       lt option value  0016  gt 0016 lt  option gt                       lt option value  0017  gt 0017 lt  option gt                       lt option value  0018  gt 0018 lt  option gt                       lt option value  0019  gt 0019 lt  option gt                       lt option value  0020  gt 0020 lt  option gt                       lt option value  0021  gt 0021 lt  option gt                       lt option value  0022  gt 0022 lt  option gt                       lt option value  0023  gt 0023 lt  option gt                       lt option value  0024  gt 0024 lt  option gt                       lt option value  0025  gt 0025 lt  option gt                       lt option value  0026  gt 0026 lt  option gt                       lt option value  0027  gt 0027 lt  option gt                       lt option value  0028  gt 0028 lt  option gt                       lt option value  0029  gt 0029 lt  option gt                       lt option value  0030  gt 0030 lt  option gt                       lt option value  0031  gt 0031 lt  option gt                       lt option value  0032  gt 0032 lt  option gt                       lt option value  0033  gt 0033 lt  option gt                       lt option value  0034  gt 0034 lt  option gt                       lt option value  0035  gt 0035 lt  option gt                       lt option value  0036  gt 0036 lt  option gt                       lt option value  0037  gt 0037 lt  option gt                       lt option value  0038  gt 0038 lt  option gt                       lt option value  0039  gt 0039 lt  option gt                       lt option value  0040  gt 0040 lt  option gt                   lt  select gt               lt  td gt           lt  tr gt           lt tr gt               lt td gt                   lt select id  Select2   gt                       lt option value  0000  gt 0000 lt  option gt                       lt option value  0001  gt 0001 lt  option gt                       lt option value  0002  gt 0002 lt  option gt                       lt option value  0003  gt 0003 lt  option gt                       lt option value  0004  gt 0004 lt  option gt                       lt option value  0005  gt 0005 lt  option gt                       lt option value  0006  gt 0006 lt  option gt                       lt option value  0007  gt 0007 lt  option gt                       lt option value  0008  gt 0008 lt  option gt                       lt option value  0009  gt 0009 lt  option gt                       lt option value  0010  gt 0010 lt  option gt                       lt option value  0011  gt 0011 lt  option gt                       lt option value  0012  gt 0012 lt  option gt                       lt option value  0013  gt 0013 lt  option gt                       lt option value  0014  gt 0014 lt  option gt                       lt option value  0015  gt 0015 lt  option gt                       lt option value  0016  gt 0016 lt  option gt                       lt option value  0017  gt 0017 lt  option gt                       lt option value  0018  gt 0018 lt  option gt                       lt option value  0019  gt 0019 lt  option gt                       lt option value  0020  gt 0020 lt  option gt                       lt option value  0021  gt 0021 lt  option gt                       lt option value  0022  gt 0022 lt  option gt                       lt option value  0023  gt 0023 lt  option gt                       lt option value  0024  gt 0024 lt  option gt                       lt option value  0025  gt 0025 lt  option gt                       lt option value  0026  gt 0026 lt  option gt                       lt option value  0027  gt 0027 lt  option gt                       lt option value  0028  gt 0028 lt  option gt                       lt option value  0029  gt 0029 lt  option gt                       lt option value  0030  gt 0030 lt  option gt                       lt option value  0031  gt 0031 lt  option gt                       lt option value  0032  gt 0032 lt  option gt                       lt option value  0033  gt 0033 lt  option gt                       lt option value  0034  gt 0034 lt  option gt                       lt option value  0035  gt 0035 lt  option gt                       lt option value  0036  gt 0036 lt  option gt                       lt option value  0037  gt 0037 lt  option gt                       lt option value  0038  gt 0038 lt  option gt                       lt option value  0039  gt 0039 lt  option gt                       lt option value  0040  gt 0040 lt  option gt                   lt  select gt               lt  td gt           lt  tr gt           lt tr gt               lt td gt                   lt select id  Select3   gt                       lt option value  0000  gt 0000 lt  option gt                       lt option value  0001  gt 0001 lt  option gt                       lt option value  0002  gt 0002 lt  option gt                       lt option value  0003  gt 0003 lt  option gt                       lt option value  0004  gt 0004 lt  option gt                       lt option value  0005  gt 0005 lt  option gt                       lt option value  0006  gt 0006 lt  option gt                       lt option value  0007  gt 0007 lt  option gt                       lt option value  0008  gt 0008 lt  option gt                       lt option value  0009  gt 0009 lt  option gt                       lt option value  0010  gt 0010 lt  option gt                       lt option value  0011  gt 0011 lt  option gt                       lt option value  0012  gt 0012 lt  option gt                       lt option value  0013  gt 0013 lt  option gt                       lt option value  0014  gt 0014 lt  option gt                       lt option value  0015  gt 0015 lt  option gt                       lt option value  0016  gt 0016 lt  option gt                       lt option value  0017  gt 0017 lt  option gt                       lt option value  0018  gt 0018 lt  option gt                       lt option value  0019  gt 0019 lt  option gt                       lt option value  0020  gt 0020 lt  option gt                       lt option value  0021  gt 0021 lt  option gt                       lt option value  0022  gt 0022 lt  option gt                       lt option value  0023  gt 0023 lt  option gt                       lt option value  0024  gt 0024 lt  option gt                       lt option value  0025  gt 0025 lt  option gt                       lt option value  0026  gt 0026 lt  option gt                       lt option value  0027  gt 0027 lt  option gt                       lt option value  0028  gt 0028 lt  option gt                       lt option value  0029  gt 0029 lt  option gt                       lt option value  0030  gt 0030 lt  option gt                       lt option value  0031  gt 0031 lt  option gt                       lt option value  0032  gt 0032 lt  option gt                       lt option value  0033  gt 0033 lt  option gt                       lt option value  0034  gt 0034 lt  option gt                       lt option value  0035  gt 0035 lt  option gt                       lt option value  0036  gt 0036 lt  option gt                       lt option value  0037  gt 0037 lt  option gt                       lt option value  0038  gt 0038 lt  option gt                       lt option value  0039  gt 0039 lt  option gt                       lt option value  0040  gt 0040 lt  option gt                   lt  select gt               lt  td gt           lt  tr gt           lt tr gt               lt td gt                   lt select id  Select4   gt                       lt option value  0000  gt 0000 lt  option gt                       lt option value  0001  gt 0001 lt  option gt                       lt option value  0002  gt 0002 lt  option gt                       lt option value  0003  gt 0003 lt  option gt                       lt option value  0004  gt 0004 lt  option gt                       lt option value  0005  gt 0005 lt  option gt                       lt option value  0006  gt 0006 lt  option gt                       lt option value  0007  gt 0007 lt  option gt                       lt option value  0008  gt 0008 lt  option gt                       lt option value  0009  gt 0009 lt  option gt                       lt option value  0010  gt 0010 lt  option gt                       lt option value  0011  gt 0011 lt  option gt                       lt option value  0012  gt 0012 lt  option gt                       lt option value  0013  gt 0013 lt  option gt                       lt option value  0014  gt 0014 lt  option gt                       lt option value  0015  gt 0015 lt  option gt                       lt option value  0016  gt 0016 lt  option gt                       lt option value  0017  gt 0017 lt  option gt                       lt option value  0018  gt 0018 lt  option gt                       lt option value  0019  gt 0019 lt  option gt                       lt option value  0020  gt 0020 lt  option gt                       lt option value  0021  gt 0021 lt  option gt                       lt option value  0022  gt 0022 lt  option gt                       lt option value  0023  gt 0023 lt  option gt                       lt option value  0024  gt 0024 lt  option gt                       lt option value  0025  gt 0025 lt  option gt                       lt option value  0026  gt 0026 lt  option gt                       lt option value  0027  gt 0027 lt  option gt                       lt option value  0028  gt 0028 lt  option gt                       lt option value  0029  gt 0029 lt  option gt                       lt option value  0030  gt 0030 lt  option gt                       lt option value  0031  gt 0031 lt  option gt                       lt option value  0032  gt 0032 lt  option gt                       lt option value  0033  gt 0033 lt  option gt                       lt option value  0034  gt 0034 lt  option gt                       lt option value  0035  gt 0035 lt  option gt                       lt option value  0036  gt 0036 lt  option gt                       lt option value  0037  gt 0037 lt  option gt                       lt option value  0038  gt 0038 lt  option gt                       lt option value  0039  gt 0039 lt  option gt                       lt option value  0040  gt 0040 lt  option gt                   lt  select gt               lt  td gt           lt  tr gt       lt  table gt       lt input type  button  id  Button0  value  MoveLayout    gt   lt  body gt   lt  html gt    JAVASCRIPT CODE  var customSelectFields   new Array         Note  The list of selects to be modified  By Questor customSelectFields 0     Select0   customSelectFields 1     Select1   customSelectFields 2     Select2   customSelectFields 3     Select3   customSelectFields 4     Select4      document  ready function             Note  To debug  By Questor         Button0   click function event   AddTestDiv             StartUpCustomSelect null              Note  To test  By Questor function AddTestDiv             testDiv   append   lt div style   width 100px height 100px    gt  lt  div gt           Note  Startup selects customization scheme  By Questor function StartUpCustomSelect what         for  i   0  i  lt  customSelectFields length  i                           customSelectFields i        click function event   UpCustomSelect this                       customSelectFields i        wrap   lt div id   selectDiv     customSelectFields i        onmouseover   BlockCustomSelectAgain      status   CLOSED   gt  lt  div gt    parent   after   lt div id   coverSelectDiv     customSelectFields i        onclick   UpOrDownCustomSelect this     onmouseover   BlockCustomSelectAgain      gt  lt  div gt                 Note  Avoid breaking the layout when the CSS is modified from  position  to  absolute  on the select  By Questor                 customSelectFields i        parent   css   width           customSelectFields i        0  offsetWidth    px    height           customSelectFields i        0  offsetHeight    px              BlockCustomSelect         customSelectFields i                       Note  Repositions the div that covers the select using the  onmouseover  event so    Note  if element on the screen move the div always stand over it  recalculate  By Questor function BlockCustomSelectAgain what        for  i   0  i  lt  customSelectFields length  i                  if         customSelectFields i        parent   attr  status       CLOSED                         BlockCustomSelect         customSelectFields i                                Note  Does not allow the select to be clicked or clickable  By Questor function BlockCustomSelect what         var coverSelectDiv     what  parent   next            Note  Ensures the integrity of the div style  By Questor       coverSelectDiv  removeAttr  style            Note  To resolve compatibility issues  By Questor     var backgroundValue           var filerValue           if navigator appName     Microsoft Internet Explorer                 backgroundValue    url fakeimage            filerValue    progid DXImageTransform Microsoft AlphaImageLoader enabled true  sizingMethod   scale    src   fakeimage                     Note  To debug  By Questor        border    5px  000 solid          coverSelectDiv  css            position    absolute             top     what  offset   top    px             left     what  offset   left    px             width     what  0  offsetWidth    px             height     what  0  offsetHeight    px             background   backgroundValue           -moz-background-size   cover            -webkit-background-size   cover            background-size   cover            filer   filerValue                Note  Allow the select to be clicked or clickable  By Questor function ReleaseCustomSelect what         var coverSelectDiv     what  parent   next           coverSelectDiv  removeAttr  style          coverSelectDiv  css   display    none            Note  Open the select  By Questor function DownCustomSelect what            Note  Avoid breaking the layout  Avoid that select events be overwritten by the others  By Questor       what  css            position    absolute             z-index    100                  Note  Open dropdown  By Questor       what  attr  size   10         ReleaseCustomSelect what           Note  Avoids the side-effect of the select loses focus   By Questor       what  focus            Note  Allows you to select elements using the enter key when the select is on focus  By Questor       what  keyup function e           if e keyCode    13                        UpCustomSelect what                             Note  Closes the select when loses focus  By Questor       what  blur function e           UpCustomSelect what                  what  parent   attr  status    OPENED           Note  Close the select  By Questor function UpCustomSelect what           what  css  position   static            Note  Close dropdown  By Questor       what  attr  size   1         BlockCustomSelect what          what  parent   attr  status    CLOSED           Note  Closes or opens the select depending on the current status  By Questor function UpOrDownCustomSelect what         var customizedSelect       what  prev   children   0         if   what  prev   attr  status       CLOSED                 DownCustomSelect customizedSelect             else if   what  prev   attr  status       OPENED                 UpCustomSelect customizedSelect

User · Answer

After trying to solve this issue for some time, I managed to come with a working solution that is also valid:

var event = new MouseEvent('mousedown');
element.dispatchEvent(event);

I've tried to implement this in Jquery as well, using trigger and mousedown or only mousedown but with no success.

User · Answer

Unfortunately there s a simple answer to this question  and it s  No

User · Answer

I m fairly certain the answer is  No  You can select options with JavaScript but not open the select  You d have to use a custom solution

User · Answer

use jquery  select trigger  mousedown

User · Answer

I had this problem   and found a workable solution   I didn t want the select box to show until the user clicked on some plain HTML  So I overlayed the select element with opacity  01  Upon clicking  I changed it back to opacity 100  This allowed me to hide the select  and when the user clicked the text the select appeared with the options showing

User · Answer

I m fairly certain the answer is  No  You can select options with JavaScript but not open the select  You d have to use a custom solution

User · Answer

Unfortunately there s a simple answer to this question  and it s  No

User · Answer

The solution I present is safe  simple and compatible with Internet Explorer  FireFox and Chrome    This approach is new and complete  I not found nothing equal to that solution on the internet  Is simple  cross-browser  Internet Explorer  Chrome and Firefox   preserves the layout  use the select itself and is easy to use   Note  JQuery is required   HTML CODE   lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt CustonSelect lt  title gt   lt script type  text javascript  src    jquery-1 3 2 js  gt  lt  script gt   lt script type  text javascript  src    CustomSelect js  gt  lt  script gt   lt  head gt   lt div id  testDiv  gt  lt  div gt   lt body gt       lt table gt           lt tr gt               lt td gt                   lt select id  Select0   gt                       lt option value  0000  gt 0000 lt  option gt                       lt option value  0001  gt 0001 lt  option gt                       lt option value  0002  gt 0002 lt  option gt                       lt option value  0003  gt 0003 lt  option gt                       lt option value  0004  gt 0004 lt  option gt                       lt option value  0005  gt 0005 lt  option gt                       lt option value  0006  gt 0006 lt  option gt                       lt option value  0007  gt 0007 lt  option gt                       lt option value  0008  gt 0008 lt  option gt                       lt option value  0009  gt 0009 lt  option gt                       lt option value  0010  gt 0010 lt  option gt                       lt option value  0011  gt 0011 lt  option gt                       lt option value  0012  gt 0012 lt  option gt                       lt option value  0013  gt 0013 lt  option gt                       lt option value  0014  gt 0014 lt  option gt                       lt option value  0015  gt 0015 lt  option gt                       lt option value  0016  gt 0016 lt  option gt                       lt option value  0017  gt 0017 lt  option gt                       lt option value  0018  gt 0018 lt  option gt                       lt option value  0019  gt 0019 lt  option gt                       lt option value  0020  gt 0020 lt  option gt                       lt option value  0021  gt 0021 lt  option gt                       lt option value  0022  gt 0022 lt  option gt                       lt option value  0023  gt 0023 lt  option gt                       lt option value  0024  gt 0024 lt  option gt                       lt option value  0025  gt 0025 lt  option gt                       lt option value  0026  gt 0026 lt  option gt                       lt option value  0027  gt 0027 lt  option gt                       lt option value  0028  gt 0028 lt  option gt                       lt option value  0029  gt 0029 lt  option gt                       lt option value  0030  gt 0030 lt  option gt                       lt option value  0031  gt 0031 lt  option gt                       lt option value  0032  gt 0032 lt  option gt                       lt option value  0033  gt 0033 lt  option gt                       lt option value  0034  gt 0034 lt  option gt                       lt option value  0035  gt 0035 lt  option gt                       lt option value  0036  gt 0036 lt  option gt                       lt option value  0037  gt 0037 lt  option gt                       lt option value  0038  gt 0038 lt  option gt                       lt option value  0039  gt 0039 lt  option gt                       lt option value  0040  gt 0040 lt  option gt                   lt  select gt               lt  td gt           lt  tr gt           lt tr gt               lt td gt                   lt select id  Select1   gt                       lt option value  0000  gt 0000 lt  option gt                       lt option value  0001  gt 0001 lt  option gt                       lt option value  0002  gt 0002 lt  option gt                       lt option value  0003  gt 0003 lt  option gt                       lt option value  0004  gt 0004 lt  option gt                       lt option value  0005  gt 0005 lt  option gt                       lt option value  0006  gt 0006 lt  option gt                       lt option value  0007  gt 0007 lt  option gt                       lt option value  0008  gt 0008 lt  option gt                       lt option value  0009  gt 0009 lt  option gt                       lt option value  0010  gt 0010 lt  option gt                       lt option value  0011  gt 0011 lt  option gt                       lt option value  0012  gt 0012 lt  option gt                       lt option value  0013  gt 0013 lt  option gt                       lt option value  0014  gt 0014 lt  option gt                       lt option value  0015  gt 0015 lt  option gt                       lt option value  0016  gt 0016 lt  option gt                       lt option value  0017  gt 0017 lt  option gt                       lt option value  0018  gt 0018 lt  option gt                       lt option value  0019  gt 0019 lt  option gt                       lt option value  0020  gt 0020 lt  option gt                       lt option value  0021  gt 0021 lt  option gt                       lt option value  0022  gt 0022 lt  option gt                       lt option value  0023  gt 0023 lt  option gt                       lt option value  0024  gt 0024 lt  option gt                       lt option value  0025  gt 0025 lt  option gt                       lt option value  0026  gt 0026 lt  option gt                       lt option value  0027  gt 0027 lt  option gt                       lt option value  0028  gt 0028 lt  option gt                       lt option value  0029  gt 0029 lt  option gt                       lt option value  0030  gt 0030 lt  option gt                       lt option value  0031  gt 0031 lt  option gt                       lt option value  0032  gt 0032 lt  option gt                       lt option value  0033  gt 0033 lt  option gt                       lt option value  0034  gt 0034 lt  option gt                       lt option value  0035  gt 0035 lt  option gt                       lt option value  0036  gt 0036 lt  option gt                       lt option value  0037  gt 0037 lt  option gt                       lt option value  0038  gt 0038 lt  option gt                       lt option value  0039  gt 0039 lt  option gt                       lt option value  0040  gt 0040 lt  option gt                   lt  select gt               lt  td gt           lt  tr gt           lt tr gt               lt td gt                   lt select id  Select2   gt                       lt option value  0000  gt 0000 lt  option gt                       lt option value  0001  gt 0001 lt  option gt                       lt option value  0002  gt 0002 lt  option gt                       lt option value  0003  gt 0003 lt  option gt                       lt option value  0004  gt 0004 lt  option gt                       lt option value  0005  gt 0005 lt  option gt                       lt option value  0006  gt 0006 lt  option gt                       lt option value  0007  gt 0007 lt  option gt                       lt option value  0008  gt 0008 lt  option gt                       lt option value  0009  gt 0009 lt  option gt                       lt option value  0010  gt 0010 lt  option gt                       lt option value  0011  gt 0011 lt  option gt                       lt option value  0012  gt 0012 lt  option gt                       lt option value  0013  gt 0013 lt  option gt                       lt option value  0014  gt 0014 lt  option gt                       lt option value  0015  gt 0015 lt  option gt                       lt option value  0016  gt 0016 lt  option gt                       lt option value  0017  gt 0017 lt  option gt                       lt option value  0018  gt 0018 lt  option gt                       lt option value  0019  gt 0019 lt  option gt                       lt option value  0020  gt 0020 lt  option gt                       lt option value  0021  gt 0021 lt  option gt                       lt option value  0022  gt 0022 lt  option gt                       lt option value  0023  gt 0023 lt  option gt                       lt option value  0024  gt 0024 lt  option gt                       lt option value  0025  gt 0025 lt  option gt                       lt option value  0026  gt 0026 lt  option gt                       lt option value  0027  gt 0027 lt  option gt                       lt option value  0028  gt 0028 lt  option gt                       lt option value  0029  gt 0029 lt  option gt                       lt option value  0030  gt 0030 lt  option gt                       lt option value  0031  gt 0031 lt  option gt                       lt option value  0032  gt 0032 lt  option gt                       lt option value  0033  gt 0033 lt  option gt                       lt option value  0034  gt 0034 lt  option gt                       lt option value  0035  gt 0035 lt  option gt                       lt option value  0036  gt 0036 lt  option gt                       lt option value  0037  gt 0037 lt  option gt                       lt option value  0038  gt 0038 lt  option gt                       lt option value  0039  gt 0039 lt  option gt                       lt option value  0040  gt 0040 lt  option gt                   lt  select gt               lt  td gt           lt  tr gt           lt tr gt               lt td gt                   lt select id  Select3   gt                       lt option value  0000  gt 0000 lt  option gt                       lt option value  0001  gt 0001 lt  option gt                       lt option value  0002  gt 0002 lt  option gt                       lt option value  0003  gt 0003 lt  option gt                       lt option value  0004  gt 0004 lt  option gt                       lt option value  0005  gt 0005 lt  option gt                       lt option value  0006  gt 0006 lt  option gt                       lt option value  0007  gt 0007 lt  option gt                       lt option value  0008  gt 0008 lt  option gt                       lt option value  0009  gt 0009 lt  option gt                       lt option value  0010  gt 0010 lt  option gt                       lt option value  0011  gt 0011 lt  option gt                       lt option value  0012  gt 0012 lt  option gt                       lt option value  0013  gt 0013 lt  option gt                       lt option value  0014  gt 0014 lt  option gt                       lt option value  0015  gt 0015 lt  option gt                       lt option value  0016  gt 0016 lt  option gt                       lt option value  0017  gt 0017 lt  option gt                       lt option value  0018  gt 0018 lt  option gt                       lt option value  0019  gt 0019 lt  option gt                       lt option value  0020  gt 0020 lt  option gt                       lt option value  0021  gt 0021 lt  option gt                       lt option value  0022  gt 0022 lt  option gt                       lt option value  0023  gt 0023 lt  option gt                       lt option value  0024  gt 0024 lt  option gt                       lt option value  0025  gt 0025 lt  option gt                       lt option value  0026  gt 0026 lt  option gt                       lt option value  0027  gt 0027 lt  option gt                       lt option value  0028  gt 0028 lt  option gt                       lt option value  0029  gt 0029 lt  option gt                       lt option value  0030  gt 0030 lt  option gt                       lt option value  0031  gt 0031 lt  option gt                       lt option value  0032  gt 0032 lt  option gt                       lt option value  0033  gt 0033 lt  option gt                       lt option value  0034  gt 0034 lt  option gt                       lt option value  0035  gt 0035 lt  option gt                       lt option value  0036  gt 0036 lt  option gt                       lt option value  0037  gt 0037 lt  option gt                       lt option value  0038  gt 0038 lt  option gt                       lt option value  0039  gt 0039 lt  option gt                       lt option value  0040  gt 0040 lt  option gt                   lt  select gt               lt  td gt           lt  tr gt           lt tr gt               lt td gt                   lt select id  Select4   gt                       lt option value  0000  gt 0000 lt  option gt                       lt option value  0001  gt 0001 lt  option gt                       lt option value  0002  gt 0002 lt  option gt                       lt option value  0003  gt 0003 lt  option gt                       lt option value  0004  gt 0004 lt  option gt                       lt option value  0005  gt 0005 lt  option gt                       lt option value  0006  gt 0006 lt  option gt                       lt option value  0007  gt 0007 lt  option gt                       lt option value  0008  gt 0008 lt  option gt                       lt option value  0009  gt 0009 lt  option gt                       lt option value  0010  gt 0010 lt  option gt                       lt option value  0011  gt 0011 lt  option gt                       lt option value  0012  gt 0012 lt  option gt                       lt option value  0013  gt 0013 lt  option gt                       lt option value  0014  gt 0014 lt  option gt                       lt option value  0015  gt 0015 lt  option gt                       lt option value  0016  gt 0016 lt  option gt                       lt option value  0017  gt 0017 lt  option gt                       lt option value  0018  gt 0018 lt  option gt                       lt option value  0019  gt 0019 lt  option gt                       lt option value  0020  gt 0020 lt  option gt                       lt option value  0021  gt 0021 lt  option gt                       lt option value  0022  gt 0022 lt  option gt                       lt option value  0023  gt 0023 lt  option gt                       lt option value  0024  gt 0024 lt  option gt                       lt option value  0025  gt 0025 lt  option gt                       lt option value  0026  gt 0026 lt  option gt                       lt option value  0027  gt 0027 lt  option gt                       lt option value  0028  gt 0028 lt  option gt                       lt option value  0029  gt 0029 lt  option gt                       lt option value  0030  gt 0030 lt  option gt                       lt option value  0031  gt 0031 lt  option gt                       lt option value  0032  gt 0032 lt  option gt                       lt option value  0033  gt 0033 lt  option gt                       lt option value  0034  gt 0034 lt  option gt                       lt option value  0035  gt 0035 lt  option gt                       lt option value  0036  gt 0036 lt  option gt                       lt option value  0037  gt 0037 lt  option gt                       lt option value  0038  gt 0038 lt  option gt                       lt option value  0039  gt 0039 lt  option gt                       lt option value  0040  gt 0040 lt  option gt                   lt  select gt               lt  td gt           lt  tr gt       lt  table gt       lt input type  button  id  Button0  value  MoveLayout    gt   lt  body gt   lt  html gt    JAVASCRIPT CODE  var customSelectFields   new Array         Note  The list of selects to be modified  By Questor customSelectFields 0     Select0   customSelectFields 1     Select1   customSelectFields 2     Select2   customSelectFields 3     Select3   customSelectFields 4     Select4      document  ready function             Note  To debug  By Questor         Button0   click function event   AddTestDiv             StartUpCustomSelect null              Note  To test  By Questor function AddTestDiv             testDiv   append   lt div style   width 100px height 100px    gt  lt  div gt           Note  Startup selects customization scheme  By Questor function StartUpCustomSelect what         for  i   0  i  lt  customSelectFields length  i                           customSelectFields i        click function event   UpCustomSelect this                       customSelectFields i        wrap   lt div id   selectDiv     customSelectFields i        onmouseover   BlockCustomSelectAgain      status   CLOSED   gt  lt  div gt    parent   after   lt div id   coverSelectDiv     customSelectFields i        onclick   UpOrDownCustomSelect this     onmouseover   BlockCustomSelectAgain      gt  lt  div gt                 Note  Avoid breaking the layout when the CSS is modified from  position  to  absolute  on the select  By Questor                 customSelectFields i        parent   css   width           customSelectFields i        0  offsetWidth    px    height           customSelectFields i        0  offsetHeight    px              BlockCustomSelect         customSelectFields i                       Note  Repositions the div that covers the select using the  onmouseover  event so    Note  if element on the screen move the div always stand over it  recalculate  By Questor function BlockCustomSelectAgain what        for  i   0  i  lt  customSelectFields length  i                  if         customSelectFields i        parent   attr  status       CLOSED                         BlockCustomSelect         customSelectFields i                                Note  Does not allow the select to be clicked or clickable  By Questor function BlockCustomSelect what         var coverSelectDiv     what  parent   next            Note  Ensures the integrity of the div style  By Questor       coverSelectDiv  removeAttr  style            Note  To resolve compatibility issues  By Questor     var backgroundValue           var filerValue           if navigator appName     Microsoft Internet Explorer                 backgroundValue    url fakeimage            filerValue    progid DXImageTransform Microsoft AlphaImageLoader enabled true  sizingMethod   scale    src   fakeimage                     Note  To debug  By Questor        border    5px  000 solid          coverSelectDiv  css            position    absolute             top     what  offset   top    px             left     what  offset   left    px             width     what  0  offsetWidth    px             height     what  0  offsetHeight    px             background   backgroundValue           -moz-background-size   cover            -webkit-background-size   cover            background-size   cover            filer   filerValue                Note  Allow the select to be clicked or clickable  By Questor function ReleaseCustomSelect what         var coverSelectDiv     what  parent   next           coverSelectDiv  removeAttr  style          coverSelectDiv  css   display    none            Note  Open the select  By Questor function DownCustomSelect what            Note  Avoid breaking the layout  Avoid that select events be overwritten by the others  By Questor       what  css            position    absolute             z-index    100                  Note  Open dropdown  By Questor       what  attr  size   10         ReleaseCustomSelect what           Note  Avoids the side-effect of the select loses focus   By Questor       what  focus            Note  Allows you to select elements using the enter key when the select is on focus  By Questor       what  keyup function e           if e keyCode    13                        UpCustomSelect what                             Note  Closes the select when loses focus  By Questor       what  blur function e           UpCustomSelect what                  what  parent   attr  status    OPENED           Note  Close the select  By Questor function UpCustomSelect what           what  css  position   static            Note  Close dropdown  By Questor       what  attr  size   1         BlockCustomSelect what          what  parent   attr  status    CLOSED           Note  Closes or opens the select depending on the current status  By Questor function UpOrDownCustomSelect what         var customizedSelect       what  prev   children   0         if   what  prev   attr  status       CLOSED                 DownCustomSelect customizedSelect             else if   what  prev   attr  status       OPENED                 UpCustomSelect customizedSelect

User · Answer

I use this    but it requires the user to click on the select box     Here are the 2 javascript functions  function expand obj        obj size   5    function unexpand obj        obj size   1      then i create the select box   lt select id  test  multiple  multiple  name  foo  onFocus  expand this   onBlur  unexpand this   gt   lt option  gt option1 lt  option gt   lt option  gt option2 lt  option gt   lt option  gt option3 lt  option gt   lt option  gt option4 lt  option gt   lt option  gt option5 lt  option gt   lt  select gt     I know this code is a little late  but i hope it helps someone who had the same problem as me   ps fyi  i have not tested the code above  i create my select box dynamically   and the code i did write was only tested in FireFox

User · Answer

I m fairly certain the answer is  No  You can select options with JavaScript but not open the select  You d have to use a custom solution

User · Answer

This is very late  but I thought it could be useful to someone should they reference this question  I beleive the below JS will do what is asked     lt script gt                  document  ready function                          document getElementById  select   size 3                      lt  script gt

User · Answer

Unfortunately there s a simple answer to this question  and it s  No

User · Answer

This works on Google Chrome  dropDown   function  elementId        var dropdown   document getElementById elementId       try           showDropdown dropdown         catch e               return false      showDropdown   function  element        var event      event   document createEvent  MouseEvents        event initMouseEvent  mousedown   true  true  window       element dispatchEvent event

User · Answer

lt select id  myDropDown  gt     lt option gt html5 lt  option gt     lt option gt javascript lt  option gt     lt option gt jquery lt  option gt     lt option gt css lt  option gt     lt option gt sencha lt  option gt   lt  select gt    By jQuery   var myDropDown     myDropDown    var length       myDropDown gt  option   length    open dropdown myDropDown attr  size  length     close dropdown myDropDown attr  size  0     By javascript   var myDropDown document getElementById  myDropDown    var length   myDropDown options length    open dropdown myDropDown size   length    close dropdown myDropDown size   0    Copied from  Open close select

User · Answer

I had this problem   and found a workable solution   I didn t want the select box to show until the user clicked on some plain HTML  So I overlayed the select element with opacity  01  Upon clicking  I changed it back to opacity 100  This allowed me to hide the select  and when the user clicked the text the select appeared with the options showing

[javascript] Is it possible to use JS to open an HTML select to show its option list?

Examples related to javascript

Examples related to html-select