CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sam Skirrow
Sam Skirrow

Reputation: 3697

addClass to div on change of dropdown selection

I have the following dropdown:

<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
    <option value="Toni">Toni</option>
    <option value="Jack">Jack</option>
    <option value="James">James</option>        
</select>

Below this I have the following divs:

<div class="singer_profile_overview" id="toni">...</div>
<div class="singer_profile_overview" id="jack">...</div>
<div class="singer_profile_overview" id="james">...</div>

These are set to display:none using css

I'm trying to make it so when I select the name from the dropdown, the class "visible" is added to the corresponding div - and then removed again if the selection is changed again.

Here is what I have tried so far, but with no luck:

jQuery(document).ready(function($){ 
$("#about_performance_lead_singer").change(function () {
       $('#'(this).val()).addClass('visible');  
    });
});

Upvotes: 1

Views: 3622

Answers (5)

Richard Hamilton
Richard Hamilton

Reputation: 26434

Use the :selected selector to find the option that was selected. We can get its value by calling the prop method and passing in value as an attribute. Since the ids we are trying to get are lowercase, we use the toLowerCase() method.

The div we're trying to get is of the class .singer_profile_overview. We should use the filter function to get the ids. We store the result of this filter in a jQuery variable and finally add a class to it.

$("#about_performance_lead_singer").change(function () {
       var selectedValue = $(":selected").prop("value").toLowerCase();
       var selectedDiv = $(".singer_profile_overview").filter(function() {
           return $(this).prop("id") == selectedValue;
       });
       selectedDiv.addClass('visible');  
    });
.visible {
    color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
    <option value="Toni">Toni</option>
    <option value="Jack">Jack</option>
    <option value="James">James</option>        
</select>

<div class="singer_profile_overview" id="toni">Toni</div>
<div class="singer_profile_overview" id="jack">Jack</div>
<div class="singer_profile_overview" id="james">James</div>

Upvotes: 0

Stan Shaw
Stan Shaw

Reputation: 3034

To answer the question as it was asked:

$("#about_performance_lead_singer").on("change", function(){
    $(".singer_profile_overview").removeClass("visible");
    $("#" + $(this).val().toLowerCase()).addClass("visible");
});

However, if you're only using the class "visible" to toggle their display, you can replace 

removeClass("visible")

with 

hide()

and 

addClass("visible")

with 

show()

Upvotes: 0

Olivier De Meulder
Olivier De Meulder

Reputation: 2501

Here is how I would do this:

html:

<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
    <option value="nothing">Select One</option>
    <option value="Toni">Toni</option>
    <option value="Jack">Jack</option>
    <option value="James">James</option>        
</select>
<div class="singer_profile_overview" id="Toni">toni</div>
<div class="singer_profile_overview" id="Jack">jack</div>
<div class="singer_profile_overview" id="James">james</div>

jquery:

jQuery(document).ready(function($){ 
$("#about_performance_lead_singer").change(function () {
    var $this = $(this);   
    $('.singer_profile_overview').removeClass('visible');
    $('#' + $this.val()).addClass('visible');  
    });
});

Couple of notes:

  • It is a good practice to store $(this) in a local variable, I usually call it $this.
  • You had an upper case / lower case problem in your original code. The id of the class to update needs to match the id you call in your selector
  • Remove the visible class from every <div> prior to applying one.
  • And there is still one problem, if you click your dropdown and select the first option, the event will not fire because nothing changed. That is why I added a 'Select One' option.

And here is a fiddle.

Upvotes: 2

DinoMyte
DinoMyte

Reputation: 8858

Try this. You also need to convert the value to lowerCase() to get the exact match.

<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
    <option value="Toni">Toni</option>
    <option value="Jack">Jack</option>
    <option value="James">James</option>        
</select>

<div class="singer_profile_overview" id="toni">toni</div>
<div class="singer_profile_overview" id="jack">jack</div>
<div class="singer_profile_overview" id="james">james</div>

<style>
.singer_profile_overview
{
    display:none;
}

.visible
{
    display: block
}
</style>
<script>
jQuery(document).ready(function($){ 
$("#about_performance_lead_singer").change(function () {
    $('.singer_profile_overview').removeClass('visible'); // hide all divs by removing class visible
       $('#' + $(this).val().toLowerCase()).addClass('visible');  // find the matching div and add class visible to it
    });
});

</script>

Example : http://jsfiddle.net/RxguB/204/

Upvotes: 1

Nick Zuber
Nick Zuber

Reputation: 5637

It is because the value of the dropdown are capitalized, while your ids are lowercase. Consider the following:

jQuery(document).ready(function($){ 
$("#about_performance_lead_singer").change(function () {
       $('#'(this).val().toLowerCase()).addClass('visible');  
    });
});

Or alternatively, you can manually change the values to lower case, or the ids to be capitalized to match the values.

Upvotes: 0

Related Questions