Question

我正在一个足球联赛网站上工作。我有两个带有条件的下拉列表，第二个下拉列表基于第一个选择而受到限制。我想隐藏第二个下拉列表中的选项，默认情况下它显示所有选项。仅当我从第一个下拉列表中选择一个选项时，这些选项才应处于活动状态。第二个下拉列表在从第一个下拉列表中选择一个选项时选择了最后一个选项，默认情况下，我需要第二个下拉列表来选择第一个选项。 $（document）.ready（function（）{ var allOptions = $（'＃dseason option'） $（'＃ldivision'）。change（function（）{ $（'＃dseason选项'）.remove（） var classN = $（'＃ldivision选项：selected'）。prop（'class'）; var opts = allOptions.filter（'。'+ classN）; $ .each（opts，function（i，j）{ $（j）.appendTo（'＃dseason'）; }）; }）; //显示内容脚本 $（document）.ready（function（）{ //隐藏下拉菜单内容 $（“。showcontent”）。hide（）; //取消隐藏第一选项的内容 $（“＃acd1s2014”）。show（）; //收听下拉菜单进行更改 $（“＃dseason”）。change（function（）{ //隐藏更改内容 $（'。showcontent'）。hide（）; //取消隐藏当前项目 $（'＃'+ $（this）.val（））。show（）; }）; }）; //关闭脚本 }）; / *下拉选择器* / 选择 { 字体家族：verdana; 底边距：1em; 填充：5px；宽度：200像素；边界：0; 边框底部：2px稳定绿色； -webkit-transition：边界底部2s； /* 苹果浏览器 */ 过渡：边界2秒； } 选择：悬停{ 边框底部：2px实线； } <！-分隔选择器-> ＆nbsp;＆nbsp;＆nbsp; <！-下拉内容选项01->

ac div 2014年1月1日

ac div 2015年1月1日

ac div 01 s 2016

ac div 01 s 2017

<！-下拉内容选项02->

ac div 2014年2月2日

ac div 2015年2月2日

ac div 02 s 2016

这是小提琴。谢谢。

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>标签隐藏和排序顺序

1 个答案: