I have a ViewModel which has a dropdown like so:

```
<select data-bind="options: orderDropdown,
    value: selectedOrder, 
    optionsCaption: '---',
    event: { change: loadOrderDetails }">
</select>

```

Then the `loadOrderDetails` is set like this:

```
// loads details of selected order
self.loadOrderDetails = function () {
    $.ajax({
        url: "/api/OrderDetails",
        data: { id: self.selectedOrder() },
        type: "GET",
        success: function (data) {
            self.orderDetails(data);
        }
    });
}

```

The problem is, this event seems to fire when the page loads as when I look in the console I see this:

`GET http://localhost:52559/api/OrderDetails 400 (Bad Request)`

Any idea how I can prevent this from firing on page load?