Select element has selected value -1

Question

Select element has selected value 4 (for example), I send form data to the server. The controller return partial view.

 <script>
        $(document).ready(function () {
            var objSel = document.getElementById("IDVacationApplicationType");
            checkVacationType(objSel);
            $("select#IDVacationApplicationType").change(function () {
                checkVacationType(this);
            });

        });
        function checkVacationType(elem) {
            var item = $(elem).val();
            alert(item);
        }
 </script>

html:

<div class="form-position">
     <div class="form-label">
          @Html.LabelFor(model => model.VacationApplicationTypes)
     </div>
     <div class="form-value">
          @Html.DropDownListFor(model => model.IDVacationApplicationType, Model.VacationApplicationTypes)
          @Html.ValidationMessageFor(model => model.VacationApplicationTypes)
     </div>
</div>

alert shows -1. After that form has select element with selected value = 4. How can I get this 4?

Answer: I had two the same ID in the page.

Answer 1

You can use this

 $('#IDVacationApplicationType').find(":selected").val();

So change your function as checkVacationType as

function checkVacationType(elem) {
    var item = $(elem).find(":selected").val();
    alert(item);
}

Fiddle Demo

Answer 2

I had two the same ID in the page. I need add class to the element:

 @Html.DropDownListFor(model => model.IDVacationApplicationType, Model.VacationApplicationTypes, new { @class = "IDVacationApplicationType" })

<script>
    $(document).ready(function () {
        var objSel = $(".IDVacationApplicationType");

        checkVacationType(objSel);
        $(".IDVacationApplicationType").change(function () {
            checkVacationType(this);
        });

    });
    function checkVacationType(elem) {
        var item = $(elem).val();
        alert(item);
    }
</script>