How Can Change The Div Background Color When Dropdown Select?

When page loads language and ranking will list out. My purpose is to change language div color when I select drop-down. If I select ranking 5 fill a color of language div fully. I

Solution 1:

Use the code block in the script side

$('.form-control').change(function(e){
  var colors=['red','blue','yellow','brown','green']; 
  $(e.target.parentNode).parent('div.row').find('h4').css({"background-color":colors[e.target.selectedIndex],"width" :(parseInt(e.target.options[e.target.selectedIndex].value) * 20) +"%"});
});

http://jsfiddle.net/Lr6a5d2v/23/

Solution 2:

Here is just a quick demo (see link at the bottom). See if this is what you are looking for. I have just added my addition to your code:

// Storage for colorsvar makeColors =    ["red","yellow","orange","red","blue","pink"];
// Function to calculate percentage based on selection
function CalcSize(val)
    {
        val =   (val > 0)? val : 0;
        var calc    =   (val * 20);
        return calc+"%";
    }
// When select is changed
$("select").change(function() {
    // Find the parent based on the row classvar ParentDiv   =   $(this).parents("div.row");
    // Get the valuevar colorNum    =   $(this).val();
    // Get the h4 child to be able to change it's appearancevar Hfour       =   ParentDiv.find("h4");
    // Change the color
    Hfour.css({"background-color":makeColors[colorNum]});
    // Animate the div up and down based on the returned calculation
    Hfour.animate({width: CalcSize(colorNum)});    
});

DEMO HERE: http://jsfiddle.net/Lr6a5d2v/22/

You also should make the change I mentioned in the comments because you are putting an object rather that an object key/value pair into the data-item field:

data-item="' + item + '"

TO:

data-item="' + item.title_en + '"