выпадающий список <select>тег скрытия и порядок сортировки

Question

Я работаю на сайте футбольной лиги.У меня есть два раскрывающихся списка с критериями, второе раскрывающееся меню ограничено на основе первого выбора.

1. Я хочу скрыть параметры во втором раскрывающемся списке, по умолчанию в нем отображаются все параметры.Параметры должны быть активны только тогда, когда я выбираю параметр из первого раскрывающегося списка.
2. Во втором раскрывающемся списке выбирается последний параметр при выборе параметра из первого раскрывающегося списка, мне нужен второй раскрывающийся список, чтобы выбрать первыйопция по умолчанию.

$(document).ready(function() {
 var allOptions = $('#dseason option')
 $('#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');
  });
 });

 //show content script
 $(document).ready(function() {
  //hides dropdown content
  $(".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();
  });
 });
 //close script

});

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

Вот скрипка .

Спасибо.

Answer 1

Вы можете попробовать это:

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