从下拉列表中获取选定值的问题

Question

我试图从JavaScript和HTML的下拉列表中获取值,这是两个日期(格式只是年份),但我有一个错误,说"TypeError:"#sortDateFrom".val不是函数"

我想检查开头是否小于结束.

我的HTML代码:

<div class="col-lg-2 col-md-2 col-sm-2">
    <select class="form-control" id="sortDateFrom">
        <option selected disabled>-Date From-</option>
        <option>1900</option>
        <option>1910</option>
        <option>1920</option>
        <option>1930</option>
        <option>1940</option>
        <option>1950</option>
        <option>1960</option>
        <option>1970</option>
        <option>1980</option>
        <option>1990</option>
        <option>2000</option>
        <option>2010</option>
    </select>
</div> <!-- end column 3: Date From -->
<div class="col-lg-2 col-md-2 col-sm-2">
    <select class="form-control" id="sortDateTo">
        <option selected disabled>-Date To-</option>
        <option>1900</option>
        <option>1910</option>
        <option>1920</option>
        <option>1930</option>
        <option>1940</option>
        <option>1950</option>
        <option>1960</option>
        <option>1970</option>
        <option>1980</option>
        <option>1990</option>
        <option>2000</option>
        <option>2010</option>
    </select>
</div> <!-- end column 3: Date To -->

我在Javascript中的功能:

<script>    
    $(document).ready(function(){       
        var startDate = ('#sortDateFrom').val();
        var endDate = ('#sortDateTo').val();

        if (startDate < endDate){
            window.alert("The beginning date must be smaller then the end date ");
        }       
    });     
</script>   

Answer 1

你忘记了jquery $

您还需要在页面准备好时检查值何时更改

<script>    
    $(document).ready(function(){       
        var startDate = $('#sortDateFrom').val();
        var endDate = $('#sortDateTo').val();
        $('#sortDateFrom, #sortDateTo').change(function(){
            if (startDate < endDate){
            window.alert("The beginning date must be smaller then the end date ");
        })
        }
    });
    //
</script>