Javascript 在加载和单击时检查下拉列表的值

我有一个下拉列表，我需要在页面加载和更改时捕获其值。如果未选择报告字段，则不显示状态列表或年份列表；如果选择了报告字段（无论是加载还是用户从下拉列表中选择），则显示相应的div

谢谢你的帮助

<script type="text/javascript"> 

$(document).ready(function() {
 checkReport();
});

</script>

<select name="report" id="report">
<option></option>
<option value="state">State</option>
<option value="year">Year</option>
</select>

<div id="state-list">NY, CA, TX</div>

<div id="year-list">2012, 2013, 2014</div>

function checkReport() {

  $('#report').live('change', function() {
    $('#year-list, #state-list).hide();
    var report = $('#report').val();

    if (report) {
      $('#' + type_of_report + '-list').show();
    } else {
      $('#year-list, #state-list).hide();
    }
  });
}

$（文档）.ready（函数（）{
检查报告（）；
});
陈述
年
纽约、加利福尼亚、德克萨斯
2012, 2013, 2014
函数检查报告（）{
$（“#报告”）.live（'change'，function（）{
$（'#年份列表，#状态列表）.hide（）；
var报告=$（“#报告”）.val（）；
如果（报告）{
$（“#”+键入_of_report+'-list'）。show（）；
}否则{
$（'#年份列表，#状态列表）.hide（）；
}
});
}

这就是你所需要的我想

试试看：

<select name="report" id="report">
    <option value="">Select a type of report</option>
    <option value="state">State</option>
    <option value="year">Year</option>
</select>

<div id="state-list">NY, CA, TX</div>

<div id="year-list">2012, 2013, 2014</div>

<script type="text/javascript"> 

$(function(){

    checkReport($('#report')[0]);

    $('#report').on('change', function() {
        checkReport(this);
    });

    function checkReport(r) {            
        $('#year-list,#state-list').hide().filter(function(){
            return r.value.length > 0 &&   
             $(this).is('#' + r.value + '-list')
        }).show();            
    }
});

</script>

选择一种报告类型
陈述
年
纽约、加利福尼亚、德克萨斯
2012, 2013, 2014
$（函数（）{
检查报告（$（“#报告”）[0]）；
$（'#report'）。关于（'change'，function（）{
检查报告（本）；
});
函数检查报告（r）{
$（“#年份列表，#状态列表”）.hide（）.filter（函数（）{
返回r.value.length>0&&
$（this）.is（“#”+r.value+'-list”）
}).show（）；
}
});

证明：

注意事项：

<select name="report" id="report">
    <option value="">Select a type of report</option>
    <option value="state">State</option>
    <option value="year">Year</option>
</select>

<div id="state-list">NY, CA, TX</div>

<div id="year-list">2012, 2013, 2014</div>

<script type="text/javascript"> 

$(function(){

    checkReport($('#report')[0]);

    $('#report').on('change', function() {
        checkReport(this);
    });

    function checkReport(r) {            
        $('#year-list,#state-list').hide().filter(function(){
            return r.value.length > 0 &&   
             $(this).is('#' + r.value + '-list')
        }).show();            
    }
});

</script>

我用指令替换空白选项。

你不需要

$（“#报告”）。在（'change'），

上，因为

select

最初是DOM的一部分。不需要实时捕获它。你只需要做：

$（“#报告”）。更改（

。我添加它只是为了保持你的问题中显示的

live

功能

---

您已经描述了您需要什么，但问题是什么？您的代码没有做什么？您为什么选择一个解决方案而不是另一个？