javascript - 下拉列表

$(document).ready(function() {
       var allOptions = $('#dseason option');
       allOptions.hide();

       $('#ldivision').change(function() {
        
        $('#dseason option').remove();
        var classN = $('#ldivision option:selected').prop('class');
        var opts = allOptions.filter('.' + classN);

        $.each(opts, function(i, j) {
         $(j).appendTo('#dseason');
        });

        $('#dseason').val($('#dseason option:first').val());
        allOptions.show();

       });

       $(".showcontent").hide();
        //unhides first option content
        $("#acd1s2014").show();
        //listen to dropdown for change
        $("#dseason").change(function() {
         //rehide content on change
         $('.showcontent').hide();
         //unhides current item
         $('#' + $(this).val()).show();
        });
       
      });

/* dropdown selector */
select {
	font-family: verdana;
  margin-bottom: 1em;
  padding: 5px;
	width: 200px;
  border: 0;
  border-bottom: 2px solid green;
  -webkit-transition: border-bottom 2s; /* Safari */
    transition: border-bottom 2s;
}

select:hover {
  border-bottom: 2px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="ldivision" name="divisionselected">
  <!-- selector name -->
  <option value="" class="dselect">Select Category</option>
  <!-- league season dropdown -->
  <option class="div01" value="Division 01">Division 01</option>
  <option class="div02" value="Division 02">Division 02</option>
</select>

<!-- spacing the selectors -->
&nbsp;&nbsp;&nbsp;

<select id="dseason" name="seasonselected">
  <!-- selector name -->
  <option value="" class="sselect">Select Product</option>
  <!-- league season option 01 -->
  <option value="acd1s2014" class="div01">Season 2014</option>
  <option value="acd1s2015" class="div01">Season 2015</option>
  <option value="acd1s2016" class="div01">Season 2016</option>
  <option value="acd1s2017" class="div01">Season 2017</option>
  <!-- league season option 02 -->
  <option value="acd2s2014" class="div02">Season 2014</option>
  <option value="acd2s2015" class="div02">Season 2015</option>
  <option value="acd2s2016" class="div02">Season 2016</option>
</select>

<!-- dropdown content option 01 -->
<div id="acd1s2014" class="showcontent">ac div 01 s 2014</div>
<div id="acd1s2015" class="showcontent">ac div 01 s 2015</div>
<div id="acd1s2016" class="showcontent">ac div 01 s 2016</div>
<div id="acd1s2017" class="showcontent">ac div 01 s 2017</div>
<!-- dropdown content option 02 -->
<div id="acd2s2014" class="showcontent">ac div 02 s 2014</div>
<div id="acd2s2015" class="showcontent">ac div 02 s 2015</div>
<div id="acd2s2016" class="showcontent">ac div 02 s 2016</div>