【发布时间】：2018-10-25 21:05:39
【问题描述】：
我正在开发一个足球联赛网站。我有两个带有条件的下拉列表，第二个下拉列表是基于第一个选择的。
- 我想隐藏第二个下拉列表中的选项，默认显示所有选项。只有当我从第一个下拉列表中选择一个选项时，这些选项才应该处于活动状态。
- 从第一个下拉列表中选择一个选项时，第二个下拉列表会选择最后一个选项，我需要第二个下拉列表来默认选择第一个选项。
$(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 -->
<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。
谢谢。
【问题讨论】：
-
那么您的具体问题是什么？您所做的只是发布您的需求。听起来您只是希望我们为您编写整个需求的解决方案。顺便说一句，由于您已经在代码 sn-p 中发布了代码，因此无需同时链接到 Fiddle。
-
我是新手，了解 sn-p 部分。如何在默认情况下隐藏第二个下拉列表中的选项，目前它显示信息而不在第一个下拉列表中选择和选项？
-
是的，你已经说过了。这就是你想要发生的事情。但是，我们希望您尝试解决方案，然后针对您遇到的编程问题提出具体问题。如果您想知道如何根据对另一个列表的选择来隐藏一个列表中的选项，那么这里不是地方。网上有很多关于这类事情的教程。当您准备好尝试时，请尝试一下，如果您的尝试有问题，请返回此处并发布您正在做的事情以及您的具体问题。
-
是的，先生！注意点。
标签： javascript jquery jquery-selectors html-select dropdown