如何将HTML DropDownList值输入JS变量？

Question

我有一个HTML DropDownList看起来像这样

@Html.DropDownList("Product", (IEnumerable<SelectListItem>)ViewBag.ProductList, new { @class = "form-control" })

我想知道如何将选定的值/项目转换为JavaScript或查询变量

我尝试过这样的事情

function GetSearchParameters() {
            var product = $("#Product").val();}  

但没有运气!!

最终HTML

  <div class="portlet-body">
    @using (Html.BeginForm(new { @class = "form-inline" }))
    {                
        <form role="form">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Product</label>
                        @*@Html.DropDownListFor(m => m.Product, new SelectList(Model.Product, "Id", "Name"), "--Select Product--")*@
                        @Html.DropDownList("Product", (IEnumerable<SelectListItem>)ViewBag.ProductList, new { @class = "form-control" })

                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Name</label>
                        @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Address</label>
                        @Html.TextBoxFor(model => model.Address, new { @class = "form-control" })
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>County</label>
                        @Html.TextBoxFor(model => model.County, new { @class = "form-control" })
                    </div>
                </div>
            </div>
            <input type="hidden" id="StartIndex" value="1" />
            <input type="button" class="btn btn green" id="Search" title="Search" value="Search" />&nbsp;<img src="@Url.Content("~/Content/themes/base/images/busy.gif")" alt="Please wait..." title="Please wait..." id="waitImage" height="22" width="22" style="display: none;" />
        </form>
    }
</div>

这是我的JS函数::

<script type="text/javascript">

    $(function () {
        $("#waitImage").ajaxStart(function () {
            $(this).show();
        }).ajaxStop(function () {
            $(this).hide();
        });
        $("#Search").click(function () {
            var searchParameters = GetSearchParameters();

            var jsonData = JSON.stringify(searchParameters, null, 2);

            $.ajax({
                url: '@Url.Content(@Controllers)',
                type: 'POST',
                data: jsonData,
                datatype: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    $('#searchResults').html(data);
                    TableManaged.init();
                },
                error: function (request, status, err) {
                    alert(status);
                    alert(err);
                }
            });

            return false;
        });

        function GetSearchParameters() {
            var product = $("#Product").val();
            var name = $("#Name").val();
            var address = $("#Address1").val();
            var county = $("#County").val();


            return {
                Product: product,
                Name: name,
                Address1: address,
                County: county
            };
        };

    });

</script>

非常感谢您的回答!!