none
How to display dropdown list for select element

    Question

  • Is there a method that can be invoked to cause the list (options elements) of a select element to display?

    I am trying to automate the usage of a webpage with a select element. Upon selecting a date from the select element, the page is supposed to refresh to show relevant info. When I do it with the mouse, it works fine. However, upon using VBA to set the SelectedIndex property, triggering the FireEvent 'onchange' method, or invoking the click event of the desired Option element, nothing happens. I am wondering if showing the list first then doing onclick or click will make a difference.

    Thanks for any help


    50% of programming is coding. The other 90% is debugging


    • Edited by JonWayn Thursday, August 28, 2014 2:44 AM
    Thursday, August 28, 2014 2:43 AM

All replies

  • element.focus();

    Rob^_^

    Thursday, August 28, 2014 3:56 AM
  • I tried that on the Option element to no avail. But thanks for suggesting

    50% of programming is coding. The other 90% is debugging

    Thursday, August 28, 2014 4:09 AM
  • try with the select element.... vbscript is depreciated.... use javascript instead.

    Rob^_^

    Thursday, August 28, 2014 6:05 AM
  • It tried it on the select element with no result either. I am doing this through MSAccess. Is there a way for me to use javascript? I am just using the webbrowser control on an Access form with VBA as the native language.

    There is a script object on the page. Is there anything that I can do with it? It references, in its text property, the name of the select element, which is 'date'. The text property is:

    Text -
        $(function () {
            $('#date').on('change', function () {
                var parts = $(this).val().split("/");
                var newdate = parts[2] + "-" + parts[0] + "-" + parts[1];
                window.location.href = "/Apps/CorrectionsReports/Report/Daily/" + newdate;
            });
            $("table").tablesorter({
               sortList: [[0,0]]
            });

            $('#print-report').on('click', function (e) {
                e.preventDefault();
                window.print();
            });
        });


    50% of programming is coding. The other 90% is debugging

    Thursday, August 28, 2014 4:56 PM
  • Hi Jon.

    You can open the <select> dropdown with javascript as follows:   select.size=select.length

    But this won't help get the onchange events.  I was just tinkering with some script which automates selecting an <option>, and saw what you explained.  The onchange event does not fire when a script sets an option as selected.  I also tinkered with scripting a click at an option, but still no onchange.  In fact, scripted clicks don't even select an option, they're ignored.  However, we can catch the (scripted) click event itself, but that's different.

    Here's what I was tinkering with.

    https://googledrive.com/host/0B8BLd2qPPV7XenE0OXh6SmkwcU0

    • Edited by Prune Master Friday, August 29, 2014 1:05 PM tooltip
    Friday, August 29, 2014 2:04 AM
  • It tried it on the select element with no result either. I am doing this through MSAccess. Is there a way for me to use javascript? I am just using the webbrowser control on an Access form with VBA as the native language.

    There is a script object on the page. Is there anything that I can do with it? It references, in its text property, the name of the select element, which is 'date'. The text property is:

    Text -
        $(function () {
            $('#date').on('change', function () {
                var parts = $(this).val().split("/");
                var newdate = parts[2] + "-" + parts[0] + "-" + parts[1];
                window.location.href = "/Apps/CorrectionsReports/Report/Daily/" + newdate;
            });
            $("table").tablesorter({
               sortList: [[0,0]]
            });

            $('#print-report').on('click', function (e) {
                e.preventDefault();
                window.print();
            });
        });


    50% of programming is coding. The other 90% is debugging

    You should ask in a MS Access forum... this one's for web development....

    the script snippet you supplied is javascript... looks like jquery.


    Rob^_^

    Friday, August 29, 2014 3:54 AM
  • Hi Jon.

    You can open the <select> dropdown with javascript as follows:   select.size=select.length

    But this won't help get the onchange events.  I was just tinkering with some script which automates selecting an <option>, and saw what you explained.  The onchange event does not fire when a script sets an option as selected.  I also tinkered with scripting a click at an option, but still no onchange.  In fact, scripted clicks don't even select an option, they're ignored.  However, we can catch the (scripted) click event itself, but that's different.

    Here's what I was tinkering with.

    https://googledrive.com/host/0B8BLd2qPPV7XenE0OXh6SmkwcU0

     

    Here's a working example.

     

    https://googledrive.com/host/0B8BLd2qPPV7XbUliRnR4OW5kcjA

     

    Sunday, August 31, 2014 5:10 PM
  • I found a work-around. What I need to do is recursively select the first few items from the dropdown list, and take some actions on the loaded page each time. I determined the height of each option in a manual sort of way; by setting the mouse pointer at adjacent boundaries, reading the mouse coordinates, and doing the math. With that constant on hand, my code positions the mouse to click the dropdown arrow and display its list, then repositions the mouse to select the next item in turn. Works like a charm as long as that window has the focus

    50% of programming is coding. The other 90% is debugging

    Sunday, August 31, 2014 9:24 PM
  • <script>
    	function jonWayn( n ) {
    		var parts = document.getElementById("date")[n].value.split("/")
    		var newdate = parts[2] + "-" + parts[0] + "-" + parts[1]
    		location.href = "/Apps/CorrectionsReports/Report/Daily/" + newdate
    	}
    </script>

     

    Well, very good, I guess.  I'm not familiar with what you're using that you'd be able to do that.  With that kind of capability though, you'd be able to inject a small script into the document head and call it with a single parameter, yes?  Here's all you'd need then.  I think it'd be a lot easier.  The function "jonWayn()" takes a parameter "n" which is the zero-based index to the desired dropdown <option> entry.

    You mentioned you are comfortable with VBA and that would've been your first approach.  If you want to give that another go, the whole trick is this.  Instead of trying to generate a change event (which is difficult), you can just extract the url info from the nth option entry and invoke a navigation directly.  To extract it:  The <option> elements can be accessed from the "date" <select> container with simple bracket indexing.  Like such:  date[n].  That's the nth <option> element inside that <select>.  The JQ .val() in the original script is an access to the select's ".value" property, date.value.  That actually is an access to the current highlighted <option> entry's .value.  (The one that's currently selected via .selectedIndex).  Given that you know the index n, you don't actually need to click/highlight/select an option.  (don't need to set selectedIndex).  You can access any option n's .value directly as such: date[n].value.  So, that's all you need to know about the DOM part.  The rest is simply juggling the retrieved value, three parts of the US date, into linear format, appending it to the url path, and initiating a navigation, by whatever means you prefer.

    Monday, September 01, 2014 11:24 AM
  • It looks like that would do the trick. I haven't tried it yet because the website in question is currently offline. I am thinking of creating a module-level  select element with event. 'Dim WithEvents cboDate As HTMLSelectElement', then, when the webpage first loads, set said element to the return value of getElementById("date"). Then inside the Change event stubs, calculate the new url by using the selectedIndex property of the select element to retrieve the value of the corresponding option element, and force navigation to the new page.

    Ill just have to wait until the website is back online so I can give that a shot, unless you see any reason why this might not work


    50% of programming is coding. The other 90% is debugging

    Monday, September 01, 2014 9:48 PM