Question

我有一个下拉列表，我需要捕获页面加载时的值以及更改时的值。如果未选择报告字段，则不显示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();
    }
  });
}

Answer 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();
    }
}

这就是你想要的东西

Answer 2

<强>尝试：

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

备注：

我将空白选项替换为说明。

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

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

2 个答案: