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

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

javascript html

Javascript 从下拉列表中获取选定值的问题,javascript,html,Javascript,Html,我试图从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 disabl

我试图从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>


$（文档）.ready（函数（）{
var startDate=（'#sortDateFrom'）.val（）；
var endDate=（'#sortDateTo'）.val（）；
如果（开始日期<结束日期）{
window.alert（“开始日期必须小于结束日期”）；
}       
});

您忘记了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>


$（文档）.ready（函数（）{
var startDate=$（'#sortDateFrom'）.val（）；
var endDate=$（'#sortDateTo'）.val（）；
$（'#sortDateFrom，#sortDateTo'）。更改（函数（）{
如果（开始日期<结束日期）{
window.alert（“开始日期必须小于结束日期”）；
})
}
});
//

您忘记了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>


$（文档）.ready（函数（）{
var startDate=$（'#sortDateFrom'）.val（）；
var endDate=$（'#sortDateTo'）.val（）；
$（'#sortDateFrom，#sortDateTo'）。更改（函数（）{
如果（开始日期<结束日期）{
window.alert（“开始日期必须小于结束日期”）；
})
}
});
//

看看这个：

您不能在

$（“#sortDateFrom option:selected”）中通过$。text（）

是否必须通过选项：也选择了。请注意不要在选项中使用值。为此，可以使用.text（）而不是.val（）

$（函数（）{ $（'#sortDateFrom，#sortDateTo'）。更改（函数（）{ var startDate=$（'#sortDateFrom option:selected'）。text（）； var endDate=$（'#sortDateTo option:selected'）。text（）；如果（开始日期<结束日期）{ log（“开始日期必须小于结束日期”）； } }); }); -从- 1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010 -日期- 1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010 看看这个：您不能在$（“#sortDateFrom option:selected”）中通过$。text（）是否必须通过选项：也选择了。请注意不要在选项中使用值。为此，可以使用.text（）而不是.val（） $（函数（）{ $（'#sortDateFrom，#sortDateTo'）。更改（函数（）{ var startDate=$（'#sortDateFrom option:selected'）。text（）； var endDate=$（'#sortDateTo option:selected'）。text（）；如果（开始日期<结束日期）{ log（“开始日期必须小于结束日期”）； } }); }); -从- 1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010 -日期- 1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010 现在，它们没有错误，但在选择年份时仍然不起作用。。他们的HTML部分是否有任何错误@奥拉维诺没有错误，但在选择年份时仍然不起作用。。他们的HTML部分是否有任何错误@奥拉维