{"id":9802,"date":"2022-09-20T19:54:13","date_gmt":"2022-09-20T14:24:13","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/"},"modified":"2022-09-20T19:54:13","modified_gmt":"2022-09-20T14:24:13","slug":"solved-background-color-change-from-dropdown-using-javascript","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/","title":{"rendered":"[Solved] Background color change from dropdown using javascript"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-27161841\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"27161841\" data-parentid=\"27161540\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>Here is a solution using jQuery<\/p>\n<pre><code>$(document).ready(function () {\n\n\/\/$(\"#background\").css(\"background-color\",$.cookie(\"defaultColor\"));\n\n    $(\"#background-change\").change(function (event) {\n      var color =  $(this).val();\n       $(\"#background\").css(\"background-color\",color);\n\n        \/\/$.cookie(\"defaultColor\",color);\n    });\n});\n<\/code><\/pre>\n<p>The code will change the background based on the selected value in the dropdown list.<\/p>\n<p>To set and retrieve cookie using jQuery, you have to use the <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/plugins.jquery.com\/cookie\/\">jQuery Cookie Plugin<\/a><\/strong><\/p>\n<p>Use this code to set cookie<\/p>\n<pre><code>$.cookie(\"defaultColor\",color);\n<\/code><\/pre>\n<p>Then use this code to retrieve cookie and set it as the backround color<\/p>\n<pre><code>$(\"#background\").css(\"background-color\",$.cookie(\"defaultColor\"));\n<\/code><\/pre>\n<p>Check the <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/jsfiddle.net\/ubdcown4\/1\/\">Fiddle<\/a><\/strong><\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">2<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Background color change from dropdown using javascript <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Here is a solution using jQuery $(document).ready(function () { \/\/$(&#8220;#background&#8221;).css(&#8220;background-color&#8221;,$.cookie(&#8220;defaultColor&#8221;)); $(&#8220;#background-change&#8221;).change(function (event) { var color = $(this).val(); $(&#8220;#background&#8221;).css(&#8220;background-color&#8221;,color); \/\/$.cookie(&#8220;defaultColor&#8221;,color); }); }); The code will change the background based on the selected value in the dropdown list. To set and retrieve cookie using jQuery, you have to use the jQuery Cookie Plugin Use this code &#8230; <a title=\"[Solved] Background color change from dropdown using javascript\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/\" aria-label=\"More on [Solved] Background color change from dropdown using javascript\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[346,333,388],"class_list":["post-9802","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-javascript","tag-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[Solved] Background color change from dropdown using javascript - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Background color change from dropdown using javascript - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Here is a solution using jQuery $(document).ready(function () { \/\/$(&quot;#background&quot;).css(&quot;background-color&quot;,$.cookie(&quot;defaultColor&quot;)); $(&quot;#background-change&quot;).change(function (event) { var color = $(this).val(); $(&quot;#background&quot;).css(&quot;background-color&quot;,color); \/\/$.cookie(&quot;defaultColor&quot;,color); }); }); The code will change the background based on the selected value in the dropdown list. To set and retrieve cookie using jQuery, you have to use the jQuery Cookie Plugin Use this code ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-20T14:24:13+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-background-color-change-from-dropdown-using-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-background-color-change-from-dropdown-using-javascript\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Background color change from dropdown using javascript\",\"datePublished\":\"2022-09-20T14:24:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-background-color-change-from-dropdown-using-javascript\\\/\"},\"wordCount\":77,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"html\",\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-background-color-change-from-dropdown-using-javascript\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-background-color-change-from-dropdown-using-javascript\\\/\",\"name\":\"[Solved] Background color change from dropdown using javascript - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-09-20T14:24:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-background-color-change-from-dropdown-using-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-background-color-change-from-dropdown-using-javascript\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-background-color-change-from-dropdown-using-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Background color change from dropdown using javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Background color change from dropdown using javascript - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Background color change from dropdown using javascript - JassWeb","og_description":"[ad_1] Here is a solution using jQuery $(document).ready(function () { \/\/$(\"#background\").css(\"background-color\",$.cookie(\"defaultColor\")); $(\"#background-change\").change(function (event) { var color = $(this).val(); $(\"#background\").css(\"background-color\",color); \/\/$.cookie(\"defaultColor\",color); }); }); The code will change the background based on the selected value in the dropdown list. To set and retrieve cookie using jQuery, you have to use the jQuery Cookie Plugin Use this code ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/","og_site_name":"JassWeb","article_published_time":"2022-09-20T14:24:13+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Background color change from dropdown using javascript","datePublished":"2022-09-20T14:24:13+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/"},"wordCount":77,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/","url":"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/","name":"[Solved] Background color change from dropdown using javascript - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-20T14:24:13+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-background-color-change-from-dropdown-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Background color change from dropdown using javascript"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=9802"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/9802\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=9802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=9802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=9802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}