如何使用选择的值来显示某个 div(单选按钮的 div)？

Question

我的目标： 用户选择选择 1，将显示相应的div。用户选取选择 2，所选内容 1div 消失并显示所选内容 2 的div。

我目前拥有的： 我目前只能获取更改时选择的值，如何将其链接到相应的div？我有所有div 的显示：none，show(( 和 hide(( 是更好的方法吗？代码笔在这里。

.HTML

<select id="categories">
<option selected="selected" class="displayNone">Category...</option>
<option value="politics">Politics</option>
<option value="business">Business</option>
<option value="sports">Sports</option>
<option value="health">Health</option>
<option value="scienceTechnology">Science & Technology</option>
</select>
<div class="politicsLabels">
<label for="trump">Donald Trump</label>
<input type="radio"
value="trump">
<label for="us%20election">US Election</label>
<input type="radio" 
value="us%20election">
<label for="justin%20trudeau">Justin Trudeau</label>
<input type="radio" 
value="justin%20trudeau">
<label for="brexit">Brexit</label>
<input type="radio" 
value="brexit">
<label for="hong%20kong">Hong Kong</label>
<input type="radio" 
value="hong%20kong">
</div>
<!-- end of politics labels -->
<!-- business labels -->
<div class="businessLabels">
<label for="stocks">Stocks</label>
<input type="radio"
value="stocks">
<label for="bitcoin">Bitcoin</label>
<input type="radio" 
value="bitcoin">
<label for="oil%20market">Oil</label>
<input type="radio" 
value="oil%20market">
<label for="housing%20crisis">Housing</label>
<input type="radio" 
value="housing%20crisis">
<label for="marijuana%20market">Marijuana</label>
<input type="radio" 
value="marijuana%20market">
</div>
<!-- end of business labels -->
<!--sports labels -->
<div class="sportsLabels">
<label for="nhl">Hockey</label>
<input type="radio"
value="nhl">
<label for="mlb">Baseball</label>
<input type="radio" 
value="mlb">
<label for="nfl">Football</label>
<input type="radio" 
value="nfl">
<label for="nba">Basketball</label>
<input type="radio" 
value="nba">
<label for="pga%20tour">Golf</label>
<input type="radio" 
value="pga%20tour">        
</div>
<!-- end of sports labels -->
<!-- start of health labels -->
<div class="healthLabels">
<label for="fitness">Fitness</label>
<input type="radio"
value="fitness">
<label for="meditation">Meditation</label>
<input type="radio"
value="meditation">
<label for="mental%20illness">Mental Health</label>
<input type="radio" 
value="mental%20illness">
<label for="e-cigarettes">E-Cigarettes</label>
<input type="radio" 
value="e-cigarettes">
<label for="alcohol">Alcohol</label>
<input type="radio" 
value="alcohol">
</div>
<!-- end of health labels -->
<!-- start of Science & Technology labels -->
<div class="scienceTechnologyLabels">
<label for="climate">Climate Change</label>
<input type="radio"
value="climate">
<label for="apple">Apple</label>
<input type="radio"
value="apple">
<label for="microsoft">Microsoft</label>
<input type="radio" 
value="microsoft">
<label for="tesla">Tesla</label>
<input type="radio" 
value="tesla">
<label for="microdosing">Microdosing</label>
<input type="radio" 
value="microdosing">
</div>
<!-- end of Science & Technology labels -->

CSS
.wrapper {
width: 110rem;
margin: 0 auto;
}
html {
font-size: 62.5%;
color: #f1f1f1;
}
body {
font-size: 1.6rem;
font-family: 'Bebas Neue', cursive;
background-color: #24292E;
}
.displayNone {
display: none;
}
header {
text-align: center;
}
header h1 {
font-size: 9rem;
margin: 5rem 0 8rem 0;
border-bottom: solid .4rem #f1f1f1;
}
header h2 {
font-size: 4rem;
margin: 5rem 0 0 0;
}
select {
font-family: 'Roboto', sans-serif;
color: #010101;
font-size: 2rem;
width: 25rem;
padding: 1rem 2rem;
margin: 2rem 0;
border: .3rem solid #f1f1f1;
border-radius: 1rem;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: url("down-arrow.svg");
background-repeat: no-repeat, repeat;
background-position: right 2rem top 60%, 0 0;
background-size: 1.8rem;
background-color: #f1f1f1;
}
.politicsLabels,
.businessLabels,
.sportsLabels,
.healthLabels,
.scienceTechnologyLabels {
display: none;
}

jQuery

$('#categories').on('change', function() {
const categoryChosen = $('option:selected', this).attr('value');
console.log(categoryChosen);
});

Answer 1

您可以使用所选类别选择要显示的div，方法是将Labels附加到类别以获取div的类。 请注意，您需要确保在显示所选div 之前隐藏所有div，以便在选择新类别时它们不会全部显示：

$('#categories').on('change', function() {
const categoryChosen = $('option:selected', this).attr('value');
// hide all categories
$('div[class$="Labels"]').hide();
// show the selected category
$('.' + categoryChosen + 'Labels').show();
});

$('#categories').on('change', function() {
const categoryChosen = $('option:selected', this).attr('value');
// hide all categories
$('div[class$="Labels"]').hide();
// show the selected category
$('.' + categoryChosen + 'Labels').show();
});

.wrapper {
width: 110rem;
margin: 0 auto;
}
html {
font-size: 62.5%;
color: #f1f1f1;
}
body {
font-size: 1.6rem;
font-family: 'Bebas Neue', cursive;
background-color: #24292E;
}
.displayNone {
display: none;
}
header {
text-align: center;
}
header h1 {
font-size: 9rem;
margin: 5rem 0 8rem 0;
border-bottom: solid .4rem #f1f1f1;
}
header h2 {
font-size: 4rem;
margin: 5rem 0 0 0;
}
select {
font-family: 'Roboto', sans-serif;
color: #010101;
font-size: 2rem;
width: 25rem;
padding: 1rem 2rem;
margin: 2rem 0;
border: .3rem solid #f1f1f1;
border-radius: 1rem;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: url("down-arrow.svg");
background-repeat: no-repeat, repeat;
background-position: right 2rem top 60%, 0 0;
background-size: 1.8rem;
background-color: #f1f1f1;
}
.politicsLabels,
.businessLabels,
.sportsLabels,
.healthLabels,
.scienceTechnologyLabels {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
<option selected="selected" class="displayNone">Category...</option>
<option value="politics">Politics</option>
<option value="business">Business</option>
<option value="sports">Sports</option>
<option value="health">Health</option>
<option value="scienceTechnology">Science & Technology</option>
</select>
<div class="politicsLabels">
<label for="trump">Donald Trump</label>
<input type="radio"
value="trump">
<label for="us%20election">US Election</label>
<input type="radio" 
value="us%20election">
<label for="justin%20trudeau">Justin Trudeau</label>
<input type="radio" 
value="justin%20trudeau">
<label for="brexit">Brexit</label>
<input type="radio" 
value="brexit">
<label for="hong%20kong">Hong Kong</label>
<input type="radio" 
value="hong%20kong">
</div>
<!-- end of politics labels -->
<!-- business labels -->
<div class="businessLabels">
<label for="stocks">Stocks</label>
<input type="radio"
value="stocks">
<label for="bitcoin">Bitcoin</label>
<input type="radio" 
value="bitcoin">
<label for="oil%20market">Oil</label>
<input type="radio" 
value="oil%20market">
<label for="housing%20crisis">Housing</label>
<input type="radio" 
value="housing%20crisis">
<label for="marijuana%20market">Marijuana</label>
<input type="radio" 
value="marijuana%20market">
</div>
<!-- end of business labels -->
<!--sports labels -->
<div class="sportsLabels">
<label for="nhl">Hockey</label>
<input type="radio"
value="nhl">
<label for="mlb">Baseball</label>
<input type="radio" 
value="mlb">
<label for="nfl">Football</label>
<input type="radio" 
value="nfl">
<label for="nba">Basketball</label>
<input type="radio" 
value="nba">
<label for="pga%20tour">Golf</label>
<input type="radio" 
value="pga%20tour">        
</div>
<!-- end of sports labels -->
<!-- start of health labels -->
<div class="healthLabels">
<label for="fitness">Fitness</label>
<input type="radio"
value="fitness">
<label for="meditation">Meditation</label>
<input type="radio"
value="meditation">
<label for="mental%20illness">Mental Health</label>
<input type="radio" 
value="mental%20illness">
<label for="e-cigarettes">E-Cigarettes</label>
<input type="radio" 
value="e-cigarettes">
<label for="alcohol">Alcohol</label>
<input type="radio" 
value="alcohol">
</div>
<!-- end of health labels -->
<!-- start of Science & Technology labels -->
<div class="scienceTechnologyLabels">
<label for="climate">Climate Change</label>
<input type="radio"
value="climate">
<label for="apple">Apple</label>
<input type="radio"
value="apple">
<label for="microsoft">Microsoft</label>
<input type="radio" 
value="microsoft">
<label for="tesla">Tesla</label>
<input type="radio" 
value="tesla">
<label for="microdosing">Microdosing</label>
<input type="radio" 
value="microdosing">
</div>
<!-- end of Science & Technology labels -->

Answer 2

给每个人一个与选择选项对应的 ID。 如

<div class="politicsLabels" id=politics>

然后，您可以按 id 显示或隐藏，例如

$("#politics").show()

或

$('option:selected').show()