0

我有一个下拉列表，我需要捕获页面加载时间和更改时间的值。如果未选择报告字段，则不显示 state-list 或 year-list，如果选择了报告字段（无论是在加载时还是当用户从下拉列表中选择时），显示相应的 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();
    }
  });
}
4

2 回答 2

1 
$(document).ready(function() {
checkReport();
 $('#report').live('change', checkReport);
});

function checkReport() {
    var report = $('#report').val();
    $('#year-list, #state-list').hide();
    if (report) {
      $('#' + report + '-list').show();
    }
}

我猜这就是你需要的

于 2012-04-20T16:14:33.130 回答
1

尝试：

<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>

证明：http: //jsfiddle.net/iambriansreed/qvq3z/

笔记：

  1. 我用说明替换了空白选项。

  2. 您不需要$('#report').on('change',，因为它select最初是 DOM 的一部分。无需现场捕捉。你可以这样做： $('#report').change(。我只是添加它以保持live您的问题中显示的功能。

于 2012-04-20T16:17:52.317 回答