Refresh DropDownList Based on Value From Input Field

Is it possible to refresh a @Html.DropDownList based on value from an input field on the same form?

For example, I have a field @Html.TextBoxFor(m => m.CustomerFunds) to which a value such as 50 would be entered, as soon as the user exits the field such as TAB for example, a function would be initiated to populate the DropDownList.

HomeController.cs

public ViewResult Index()
{
    var productList = new List<WebApplication1.Product>
    {
        new WebApplication1.Product{ProductName = "Please select a Product", ProductId = 0}
    };
    productList.AddRange(_repository.GetAllProducts());

    ViewBag.ProductList = new SelectList(productList, "ProductId", "ProductName", null);

    return View();
}

public SelectList GetProducts(int customerFunds)
{
    var productList = new List<WebApplication1.Product>
    {
        new WebApplication1.Product {ProductName = "Please select a Product", ProductId = 0}
    };
    productList.AddRange(_repository.GetProducts(customerFunds));

    return new SelectList(productList, "ProductId", "ProductName", null);
}

Index.cshtml

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { role = "form" }))
{
    @Html.TextBoxFor(m => m.CustomerFunds)
    @Html.DropDownList("ProductId", ViewBag.ProductList as SelectList)
}

Updated

I have changed the function GetProducts as follows:

public ActionResult GetProducts(decimal customerFunds)
{
    var products = _repository.GetProducts(customerFunds).Select(p => new { p.ProductId, p.ProductName }).OrderBy(p => p.ProductName);

    return Json(products, JsonRequestBehavior.AllowGet);
}

The Index.cshtml is now as follows:

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { role = "form" }))
{
    @Html.TextBoxFor(m => m.CustomerFunds)        
    <select id="ProductId">
        <option value="0">Please select a Product</option>
    </select>
}

<script type="text/javascript">
    $(document).ready(function () {
        $('#ProductId').hide();
        $('#CustomerFunds').blur(function () {
            var customerFunds = $(this).val();
            if (propertyValue.length > 0) {
                $.getJSON('/Home/GetProducts', { customerFunds: customerFunds }, function (data) {
                    $('#ProductId').show();
                    $('#ProductId option').remove();
                    $('#ProductId').append('<option value="0">Please select a Product</option');
                    for (var i = 0; i < data.length; i++) {
                        $('#ProductId').append('<option value="' + data[i].ProductID + '">' + data[i].ProductName + '</option');
                    }
                }).fail(function () {
                    debugger;
                    alert('Error getting Products');
                });
            }
            else {
                $('#ProductId option').remove();
                $('#ProductId').append('<option value="0">Please select a Product</option');
            }
        });
    });
</script>

Once data has been entered into CustomerFunds and the TAB key is pressed, the dropdown appears and is populated.

However, when viewing the source HTML of the page once the dropdown is populated, the actual select list only shows:

<select id="ProductId">
    <option value="0">Please select a Product</option>
</select>

Despite the page actually rendering the list, the selected value of the dropdown is NOT passed into the model and therefor the Model Validation fails and I have no idea why.

Updated

Thanks to markpsmith the select for ProductId should be as follows:

<select id="ProductId" name="ProductId">
    <option value="0">Please select a Product</option>
</select>