答案 0 :(得分:-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 -->
<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>