Can I select a dynamically generated option element with a C# webbrowser control

See more:

C#

Javascript

HTML

Ajax

, +

I am using a c# 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"
                 onchange="setDeliveryDate()">
                </select>
            </td>
        <tr>
        </tr>
            <td>Delivery will occur on or before</td>
            <td>
                <select name="stransp_delivery_date" id="stransp_delivery_date">
                </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.

Very appreciative of any help or guidance.

What I have tried:

Nothing - completely at a loss.