下拉选择时如何更改div背景颜色？(How can change the div background color when dropdown select?)

当页面加载语言和排名将列出。我的目的是在选择下拉菜单时更改语言div颜色。如果我选择排名5，请完全填写语言div的颜色。我很困惑，我不知道如何为每个div随机生成颜色。

我附上了一张图片。

请检查

演示

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">×</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

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">×</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

最满意答案

使用脚本端的代码块

$('.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/

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/

更多推荐