jquery : Call function on select box change event

by Emmanuel Garcia

HTML

<label>Select Membership</label>
<select id="host">
    <option value="">Select value</option>
    <option value="bronze">Bronze</option>
    <option value="silver">Silver</option>
    <option value="gold">Gold</option>
    <option value="platinum">Platinum</option>
    <option value="sapphire">Sapphire</option>
    <option value="emerald">Emerald</option>
    <option value="ruby">Ruby</option>
    <option value="diamond">Diamond</option>
</select>

<span class="checkvalue">BRONZE</span>
<span class="checkvalue">SILVER</span>
<span class="checkvalue">GOLD</span>
<span class="checkvalue">PLATINUM</span>
<span class="checkvalue">SAPPHIRE</span>
<span class="checkvalue">EMERALD</span>
<span class="checkvalue">RUBY</span>
<span class="checkvalue">DIAMOND</span>

CSS

span{
    border: 1px solid #f00;
    padding:10px;
}

JavaScript

$(document).ready(function(){
    function bronze()
    {
    
       $('span').each(function() {
        var value = $(this).text();
        if (value == "BRONZE") {
         } else {
        $(this).css('background-color', 'none');  }})
   
   }
    function silver()
    {
    
        $('span').each(function() {
        var value = $(this).text();
        if (value == "SILVER" ||  value == "BRONZE") {
        } else {
        $(this).css('background-color', 'green');  }})

    }
    function gold()
    {
       
       $('span').each(function() {
        var value = $(this).text();
        if (value == "GOLD" ||  value == "SILVER" ||  value == "BRONZE") {
         } else {
        $(this).css('background-color', 'green');  }})
   
    }
    function platinum()
    {
       
       $('span').each(function() {
        var value = $(this).text();
        if (value == "GOLD" ||  value == "SILVER" ||  value == "BRONZE") {
         } else {
        $(this).css('background-color', 'green');  }})
   
    }
    function sapphire()
    {
       
       $('span').each(function() {
        var value = $(this).text();
        if (value == "GOLD" ||  value == "SILVER" ||  value == "BRONZE") {
         } else {
        $(this).css('background-color', 'green');  }})
   
    }
    function emerald()
    {
       
       $('span').each(function() {
        var value = $(this).text();
        if (value == "GOLD" ||  value == "SILVER" ||  value == "BRONZE") {
         } else {
        $(this).css('background-color', 'green');  }})
   
    }
    function ruby()
    {
       
       $('span').each(function() {
        var value = $(this).text();
        if (value == "GOLD" ||  value == "SILVER" ||  value == "BRONZE") {
         } else {
        $(this).css('background-color', 'green');  }})
   
    }
    function diamond()
    {
       
       $('span').each(function() {
        var value = $(this).text();
        if (value == "GOLD" ||  value == "SILVER" ||  value == "BRONZE") {
 ...