How to use a select's value to show a certain div(a div of radio buttons)?

73
December 03, 2019, at 00:20 AM

My goal: The user picks selection 1 and the corresponding div will show. The user picks selection 2, the selection 1 div disappears and shows the selection 2's div.

What I currently have: I currently am able to only grab the value of the select on change, how do I link it to the corresponding divs? I have all the div's display:none, is show() and hide() a better method? CodePen here.

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

You can use the chosen category to select the div you want to display by appending Labels to the category to get the div's class. Note that you need to make sure you hide all divs before showing the selected one so that they don't all get shown as you select new categories:

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

Give each an id corresponding to the select option. Such as

<div class="politicsLabels" id=politics>

Then you can show or hid by id, such as

$("#politics").show()

or

$('option:selected').show()
READ ALSO
How can I run jQuery function only if user hasn’t scrolled?

How can I run jQuery function only if user hasn’t scrolled?

I’ve been trying to incorporate an auto scroll function on my website (live here)I want it to scroll to the content 6 seconds after load, but only if the user is on the very top of the page and hasn’t scrolled enough to uncover the #introduction element

65
how can get only numbers from the input

how can get only numbers from the input

I have on keyup and mask for phone numbers, I need to get only digits, not symbols on mask, but it is not working, please let me know my mistake

94
CropperJS getCroppedCanvas() returns null on second initialization

CropperJS getCroppedCanvas() returns null on second initialization

The method is called in the ready eventOn the first call it works

75
How to change all url images in blogger with custom url images

How to change all url images in blogger with custom url images

how do I replace all the url images in bloggerexample bp1

62