<script type="text/javascript">
//<![CDATA[

(function() {

    var listItemsContainer = $("#listItemsContainer");
    $("#fruits").bind("change", function() {
        var value = $(this).val();

        $.ajax({
    type: "GET",
    cache: false,
    url: '/Home/FruitDetails',
    data: { fruit_Id: value  },
    success: function (data, textStatus) {
        listItemsContainer.html(data);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        if (XMLHttpRequest.statusText !== "abort") {
            alert("ajax error");
        }
    }
});
    });

});

//]] >
</script>


public ActionResult FruitDetails(int fruit_Id)
{
    // get fruit details model
    return PartialView("FruitDetails", GetFruitDetails(fruit));
}

// FruitDetails.cshtml

@model MvcApplication.Models.ViewModels.FruitDetailsViewModel
<p>Fruit Name: @Model.FruitName</p>

This is a basic example of working with ajax and mvc. You will have to play a little to get this working for you're website, but it's a good start.

http://api.jquery.com/jQuery.ajax/