下拉列表 <select> 标记隐藏和排序顺序

Question

我在一个足球联赛网站上工作。我有两个带条件的下拉列表，第二个下拉列表基于第一个 selection.

我想隐藏第二个下拉列表中的选项，默认情况下它显示所有选项。仅当我 select 第一个下拉列表中的选项时，选项才应处于活动状态。
第二个下拉列表在 select 从第一个下拉列表中选择一个选项时选择最后一个选项，默认情况下我需要第二个下拉列表 select 第一个选项。

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

这里是 fiddle.

谢谢。

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>

下拉列表 <select> 标记隐藏和排序顺序

dropdown list <select> tag hide and sort order

javascript

jquery

html-select

jquery-selectors

dropdown