Javascript not seeing 'Select' value

Question

I have a form:

   <div class="modal-body">
        <form class="form-horizontal well">
            <div class="form-group">
                <label for="txtSubCategoryName" class="col-lg-4 control-label">Sub Category Name:</label>
                <div class="col-lg-8">
                    <input type="text" class="txtSubCategoryName form-control" placeholder="The description of the Sub Category" />
                </div>
            </div>
            <div class="form-group">
                <label for="cmbCostCentre" class="col-lg-4 control-label">Default Cost Centre:</label>
                <div class="col-lg-8">
                    <select class="form-control cmbCostCentre">
                        <option value="0">None</option>
                            <option value="1">Craig</option>
                            <option value="2">Melanie</option>
                    </select>
                </div>
            </div>
        </form>
        <div class="modal-footer">
            <button class="btn btn-primary btnSubmitNewSubcategory">Save</button>
            <a class="btn btn-info" data-dismiss="modal">Cancel</a>

        </div>
    </div>

On the click event, I use some javascript to send a JSON call to my MVC app.

<script type="text/javascript">
    $(document).ready(function () {
        $('.btnSubmitNewSubcategory').click(function () {
            var data = { description: $('.txtSubCategoryName').val(), defaultcostcentre: $('.cmbCostCentre'), categoryid: $('.Id').val() };

            $.ajax({
                url: '/Category/SaveSubCategory',
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(data),
                cache: false,
                async: true,
                success: function (result) {
                    if (result.Success == 'true') {
                        window.location = '/Category/EditCategory?categoryId=13';
                    } else {
                        alert(result.Message);
                    }
                },
                error: function () {
                    alert("Oh no...");
                }

            });
        });
    });

</script>

But, when the event in my MVC application gets fired, the values are populated, EXCEPT cmbCostCentre, which is always NULL, even when I select an item.

Can yo see why?

Answer 1

Your have to call the val() on even the select element without which it doesn't return any value..

So, instead of

var data = { description: $('.txtSubCategoryName').val(), defaultcostcentre: *$('.cmbCostCentre')*, categoryid: $('.Id').val() };

You should write it as

var data = { description: $('.txtSubCategoryName').val(), defaultcostcentre: *$('.cmbCostCentre').val()*, categoryid: $('.Id').val() };

Answer 2

You are passing jQuery object $('.cmbCostCentre') in defaultcostcentre.

Use

var data = {
    description: $('.txtSubCategoryName').val(),
    defaultcostcentre: $('.cmbCostCentre').val(), // Here you have missed .val()
    categoryid: $('.Id').val()
};