(I made a change to my code and removed the br tag from info2)
Currently, I have successfully implemented a feature using jQuery that reads color names and hex values from a JSON file, populates them in a drop-down select menu (which is working fine). Now, I am looking to enhance this functionality where I want the background color of a div next to the drop-down to dynamically change based on the color selected by the user. How can I achieve this?
Here's a snippet of my page:
<script language="javascript" type="text/javascript">
var JSON_Response;
$(document).ready(function () {
$.getJSON('Colors.json', function (data) {
JSON_Response = data;
var mySelect = document.getElementById("selColor");
for (i = 0; i < JSON_Response.Colors.length; i++) {
var myOption = document.createElement("option");
myOption.text = JSON_Response.Colors[i].colorName;
myOption.value = i;
try {
mySelect.add(myOption, mySelect.options[null]);
}
catch (e) {
mySelect.add(myOption, null);
}
}
});
$("#selColor").change(function () {
var myIndex = $("#selColor").val();
$("#showColor").attr("src", JSON_Response.Colors[myIndex].hex);
var info = JSON_Response.Colors[myIndex].colorName + "<br />";
info += JSON_Response.Colors[myIndex].hex+ "<br />";
var info2 = JSON_Response.Colors[myIndex].hex;
$("#divDisplay").html(info).css({'background-color' : '#' + info2});
});
});
</script>