Extract DropKick Value within Form

Question

I have started to work with beautiful dropkick drop downs. Seems like I fail to send it back to the controller with the model object filled with the dropkick field value.

.cshtml

@using (Html.BeginForm("Submit", "Home", FormMethod.Post))
        {
            <section class="form-section pink-section">
                <section class="row clearfix">
                    <section class="form-field">
                        <select class="default" name="ChildrenCount" id="ChildrenCount">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </section>


            <input type="submit" class="submit btn blue-btn" value="??? ?????" />
        }

Model (keep member name same as name + id attribute of element

public class OrderDetails
    {
        public int ChildrenCount;
    }

within _layout.xml (copied from dropkick tutorials)

 <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            $('.default').dropkick();

            $('.black').dropkick({
                theme: 'black'
            });
            $('.existing_event').dropkick();

            $('.change').dropkick({
                change: function (value, label) {
                    alert('You picked: ' + label + ':' + value);
                }
            });

            $('.custom_theme').dropkick({
                theme: 'black',
                change: function (value, label) {
                    $(this).dropkick('theme', value);
                }
            });

            $('.dk_container').first().focus();
        });
    </script>

once hit the submit button I reach the relevant controller function but the input model object doesn't contain the value selected...