使用ac＃Webbrowser控件选择动态生成的选项元素

Question

I am using ac# webbrowser control to navigate through a commercial website I work with. I log in and navigate to a particular list. The list is prospective jobs. Then I continue through some links to bid on those jobs. In the process I ran into a problem.

On one of the forms there are 2 select elements (drop down lists). The options on those lists are generated dynamically by means of some javascript scripts - most of which are available in the source.

In the page source code there is nothing to select. The options appear dynamically when navigating the page manually - but I am trying to navigate it by means of c# in a webbrowser.

Here's the form. (I cut out styles and changed some of the text - and I know it is badly formed, but it is not mine)

<form name="frm1" id="frm1" action="/tab/Transport/LoadAssigned2.asp" method="post">

    <table class="section">
        <tr>
            <td>Name</td>
            <td>
                <input type="text" name="s_name" id="s_name" size="25" maxlength="50"></td>
        </tr>
        <tr>
            <td>Fax</td>
            <td>
                <input type="text" name="txtFaxNumber" id="txtFaxNumber" size="25" maxlength="15" value="1234567890"></td>
        </tr>
        <tr>
            <td>Email</td>
            <td>
                <input type="text" name="txtEmail" id="txtEmail" size="25" maxlength="225"></td>
        </tr>
        <tr>
            <td>Pickup will occur on or before</td>
            <td>
                <select name="stransp_pickup_date" id="stransp_pickup_date" style="width: 173px;" onchange="setDeliveryDate()">
                </select>
            </td>
        <tr>
        </tr>
            <td>Delivery will occur on or before</td>
            <td>
                <select name="stransp_delivery_date" id="stransp_delivery_date" style="width: 173px;">
                </select>
            </td>
        </tr>
    </table>
    <input type="hidden" name="nload_id" id="nload_id" value="123456789">

</form>

As you can see the two select elements have no option children. Those are created by the scripts, starting with setDeliveryDate:

function setDeliveryDate(){
    var distance = 226;
    var delivery = $("#stransp_delivery_date");
    var pickupDate = $("#stransp_pickup_date option:selected").val();
    $("#stransp_delivery_date option").remove(); 
    delivery.append("<option value='-1'>SELECT DATE</option>");
    if(distance <=200){
        generateDeliveryDates(delivery,pickupDate,2);
    }else if(distance >=201 && distance <= 400){
        generateDeliveryDates(delivery,pickupDate,3);
    }else if(distance >=401 && distance <= 700){
        generateDeliveryDates(delivery,pickupDate,4);
    }else if(distance >=701 && distance <= 1400){
        generateDeliveryDates(delivery,pickupDate,5);
    }else if(distance >=1401 && distance <= 1800){
        generateDeliveryDates(delivery,pickupDate,6);
    }else if(distance >=1801 && distance <= 2200){
        generateDeliveryDates(delivery,pickupDate,7);
    }else if(distance >=2201 && distance <= 2500){
        generateDeliveryDates(delivery,pickupDate,8);
    }else if(distance >=2501 && distance <= 4000){
        generateDeliveryDates(delivery,pickupDate,9);
    }
}

And the generateDeliveryDates functions is:

function generateDeliveryDates(delivery,pickupDate,index){
    for (var i = 0; i < index; i++) {
        if (moment(pickupDate).add('days', i).format('dddd') == 'Sunday') {
            index++;
            delivery.append("<option value='" + moment(pickupDate).add('days', i).format('MM/DD/YYYY') + "'>" + moment        (pickupDate).add('days', i).format('dddd')+" - "+ moment(pickupDate).add('days', i).format('MM/DD/YYYY') + "</option>");
        } else {
        delivery.append("<option value='" + moment(pickupDate).add('days', i).format('MM/DD/YYYY') + "'>" + moment        (pickupDate).add('days', i).format('dddd')+" - "+ moment(pickupDate).add('days', i).format('MM/DD/YYYY') + "</option>");
        }
    };
}

IfI can keep showing more of the scripts - but I'm hoping the idea is clear. The options under the select element are created based on an onchange event in the first select element. It is a list of dates.

What I want to do is to select the last of the date options in both cases - but I can't see how to do it before the exist. Also, the number of options in the list varies based on the distance, as you can see above.

How can I access those elements when I can't see them in the page source code?

Very appreciative of any help or guidance.

Answer 1

In case anyone reads this in the future, I ended up solving this myself, and want to share the solution, which is pretty straight forward.

1 - please note that the first "select" element has an onchange function- setDeliveryDate. So the first think I do is invoke that script function once:

webBrowser1.Document.InvokeScript("setDeliveryDate");

Then I collect the child nodes in a collection, and select the last of them:

HtmlElementCollection colOptions =
   webBrowser1.Document.GetElementById("stransp_pickup_date").Children;

int colCount = colOptions.Count;

colOptions[colCount - 1].SetAttribute("selected", "selected");

The I re-run the same script, which also creates the options for the second select, and do the same thing (get the option elements into a collection and select the last one):

webBrowser1.Document.InvokeScript("setDeliveryDate");

HtmlElementCollection colOptions2 =
    webBrowser1.Document.GetElementById("stransp_delivery_date").Children;

int colCount2 = colOptions2.Count;

colOptions2[colCount2 - 1].SetAttribute("selected", "selected");

The last step is of course to submit the form:

webBrowser1.Document.GetElementById("frm1").InvokeMember("submit");

Hope this helps other newbies like me.