@{
    var cmrData = ((ShipmentController)this.ViewContext.Controller).GetNoCmrs(new List<int>() { 1 });
    var invoiceData = ((ShipmentController)this.ViewContext.Controller).GetReadyForInvoice(new List<int>() { 1 });
    var filterData = ((ShipmentController)this.ViewContext.Controller).GetNoCmrs(new List<int>() { 1 });
}

<table class="table table-hover" id="shipmentOverview">
    <tr>
        <th>Id</th>
        <th>StartDateTime</th>
        <th>EndDateTime</th>
    </tr>
    @foreach (var shipment in filterData)
    {
        <tr>
            <td>@shipment.ShipmentId</td>
            <td>@shipment.StartDateTime</td>
            <td>@shipment.EndDateTime</td>
        </tr>
    }
</table>

<div id="shipmentDetailFilter">
            Shipment Details Filter Options:
            <select class="form-control" onchange="loadShipmentsByCondition()" id="conditionSelect">
                <option disabled value="" selected="selected">Please select a filter</option>
                <option>Ready to be invoiced</option>
                <option>CMR not received</option>
            </select>
        </div>

<script>
    var x;
    function loadShipmentsByCondition() {
        x = document.getElementById("conditionSelect").value;
        if (x === "CMR not received") {
            console.log("CMR");
        } else if(x === "Ready to be invoiced") {
            console.log("INVOICE");
        }
    }
</script>