How can change the div background color when dropdown select?

Question

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 am confused I don't know how to generate color randomly for each div.

I have attached an image.

Please check

Demo

JS

//fake data for this test
var response = {
    availableLanguage: [{
        id: "1",
        language_id: "English",
        title_en: "USEnglish"
    }, {
        id: "2",
        title_en: "Hindi"
    }, {
        id: "3",
        title_en: "Arabi"
    }

    ]
}


var responseDB = {
    selectLanguageRankingTagId: [{
        id: "1",
        user_id: "11",
        language_id: "English",
        ranking: "2",
        title_en: "English"
    }, {
        id: "2",
        user_id: "11",
        language_id: "German",
        ranking: "3",
        title_en: "German"
    }, {
        id: "3",
        user_id: "11",
        language_id: "French",
        ranking: "4",
        title_en: "French"
    }

    ]
}


var $languagemodal = $('#languagemodal'); // get the modal and the dialog div
var $dialog = $languagemodal.find('.modal-dialog');

//$languagemodal.modal({show: true}); // just to show the modal for the demo

// get languages
//$.get("/tag/language", function(response){
        var optionLang = '';
        for (var i = 0; i < response.availableLanguage.length; i++) {
            engLangID  = response.availableLanguage[i].id;
            engLang    = response.availableLanguage[i].title_en;
            optionLang += '<option value="'+engLangID+'" data-language="'+engLang+'">'+engLang+'</option>';
        }

// load the modal content div
$dialog.html('<div class="modal-content"><div class="modal-header "><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">Edit Languages</h4></div><div class="modal-body"><div class="appendRow"></div></div><div class="modal-footer"><div class="row"><select class="form-control input-sm addMore"><option selected="selected">Add Language</option>' + optionLang + '</select></div><br><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div>');

// get the modal body we just added
var $modalBody = $dialog.find('.modal-body');

// loop over your data, you would have this in your $.get function 
$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
    delID = item.id;
    // make the row
    var $newRow = $('<div class="row"><div class="col-md-8"><h4 style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 30px; margin:5px 0px; padding:4px 5px;">' + item.title_en + '</h4></div><div class="col-md-3" style="padding:5px;"><select class="form-control input-sm" id="' + item.id + '" data-item="' + item + '"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select><span class="glyphicon glyphicon-remove removefetchedData" data-removefile="" data-id="'+item.id+'" ></span></div></div>')
    // set the select value
    $newRow.find('select').val(item.ranking);
    // add the row to the modal body
    $modalBody.append($newRow);

});

//remove rank and language of users
                $( ".removefetchedData" ).click(function(e){
                    e.preventDefault();
                    alert($(this).data('id'));
                    /*$.post("/language/delete", {rateUserLangID: userLangDelID}, function(html){
                     //append css design
                     });*/
                });

$(".modal-dialog").on('change', ".addMore", function(){
            var selected = $( this ).find(':selected');
            language       = selected.data('language');
            languageID     = selected.val();
            $( ".appendRow" ).append('<div class="row"><div class="col-md-8"><h4 style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 30px; margin:5px 0px; padding:4px 5px;">'+language+'</h4></div><div class="col-md-3" style="padding:5px;"><select class="form-control input-sm"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select><span class="glyphicon glyphicon-remove removefile" data-removefile=""></span></div></div>');
        });    

$('.modal-dialog').on('click', '.removefile', function() {
    $(this).closest('.row').remove();
});

 //});// get languages end

HTML

<div id="languagemodal">
  <div class="modal-dialog" style="margin: 54px 0px;"></div>
</div>

This part is not right, you are adding the object, not the language-> `" data-item="' + item + '"` so it is producing -> `data-item="[object Object]"` — Rasclatt, Nov 12 '15 at 05:29
@Irshad, When page loads each div need to show different backgound colour. If dropdown value is 5 show full color. That means if a div width is 250 full colour will show. If dropdown value is 4 div color reduce to div width color 200. If dropdown value is 3 div color reduce to div width color 150. Each div need different color just like image. — Sarath TS, Nov 12 '15 at 05:31
Take a look at this [Question](https://stackoverflow.com/questions/3951903/how-to-make-a-progress-bar). I think this is what you are looking for. — Irshad, Nov 12 '15 at 05:43

Rasclatt · Answer 1 · 2015-11-12T06:32:36.270

0

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 colors
var 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 class
    var ParentDiv   =   $(this).parents("div.row");
    // Get the value
    var colorNum    =   $(this).val();
    // Get the h4 child to be able to change it's appearance
    var 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 + '"

edited Nov 12 '15 at 06:32

answered Nov 12 '15 at 05:58

Rasclatt

12,498
3
25
33

Thanks. But generate a row when select add language is not working now. – Sarath TS Nov 12 '15 at 06:02
Yeah, that is because you have to complete that portion. That is a whole other issue in itself. You have to include language id and all the other stuff you do in the first block. I don't know how you generate that data so I can't really help there. – Rasclatt Nov 12 '15 at 06:04
Presumably you create the data from the `response` object so you just use that data, perhaps via iteration or what-have-you – Rasclatt Nov 12 '15 at 06:07
Ok great! I guess you got it all working so that's great! If the question is answered, make sure to mark as such so people don't keep stopping by to try and solve it. – Rasclatt Nov 12 '15 at 06:08

score 0 · Accepted Answer · answered Nov 12 '15 at 06:13

0

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/

answered Nov 12 '15 at 06:13

Stark Buttowski

1,799
2
10
21

Thanks. Do yo know how colors selected default when page loads? eg if language div has ranking values select color when page loads. – Sarath TS Nov 12 '15 at 07:17
use the code also on `$(document).ready()` like: http://jsfiddle.net/Lr6a5d2v/41/ – Stark Buttowski Nov 13 '15 at 04:28

How can change the div background color when dropdown select?

2 Answers2

Linked