Dropdown List isn't using default option MVC Razor

Question

In my view I have this. This creates about 7 different dropdown lists which are hidden by default and when you select a first dropdown list then based off of what you choose there it will take the text from that option and show one of the hidden dropdown lists. However it doesn't take the default option label that I have specified ("--Choose one--") is there anything wrong that you can see or did it just seem to break for no reason?

@Html.DropDownListFor(model => model.ProductsID, Model.HowProductsAreUsedOptions, new { @class = "General", id = "General-1" })

@foreach (KeyValuePair<String, List<SelectListItem>> rec in Model.SecondaryOptions)
{
    @Html.DropDownListFor(model => model.ApplicationSecondaryValue, rec.Value, "--Choose One--", new { id = rec.Key.Replace(" ", "").Replace("&", "") + "1"})
}

Edit* Here is my function that handles the showing and hiding of the second dropdown lists

    $('.General').change(function () {
    var ID = $(this).attr('id');
    var selectedValue = $('#' + ID + " option:selected").text().replace(/\&/g, '').replace(/\s/g, '');
    var value = $('#' + ID + " option:selected").val();
    var divID = ID.substr(ID.indexOf("-") + 1);
    if (value != 0) {
        $('#' + selectedValue + divID).show().siblings().hide();
        $('#General-' + divID).show();
    }
    else {
        $('#General-' + divID).siblings().hide().val(0);
    }
});

Answer 1

What you can simply do is this:

@Html.DropDownListFor(model => model.product, 
                  new SelectList(Model.ProductList, "productID", "productName"),
                  "---Select A product---")

This will bind the selected product to model's product and show default value initially