Question

I have a drop-down list that I need to capture the value of when the page is loaded and whenever it is changed. If the report field is not selected, do not display state-list or year-list, if the report field is selected (whether on load or when the user selects it from the drop-down), display the appropriate div.

Any help is appreciated, thanks.

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

Thats what you need i guess