**I want to add image in dropdown of selector using jquery but I am unable to get it here Is the options that I want to map but I just see text in the dropdown but I am unable to view the image Function to populate color dropdown options based on selected fabric Event listener to update color dropdown options when
fabric selection changes
here is the jquery code that populate it I don’t know what is the issue in this code I tried a lot but I am unable to get my code
correct**
I want to get the color based on the Fabrics selected by the user in previous dropdown
that previous dropdown is working perfect and based on that I am getting the text in this dropdown but I cant get the image
var fabricColorMap = {
"Chenille": [
{color: "Red", image: "red_image_url",value:"chenille-red"},
{color: "Blue", image: "https://cdn.shopify.com/s/files/1/0514/1558/0823/files/BLUE_NAPLES_1_100x100.jpg?v=1620747812",
value:"chenille-blue"}
],
"Plush": [
{color: "Green", image: "green_image_url",value:"plush-green"},
{color: "Yellow", image: "yellow_image_url",value:"yellow-green"}
],
"Linen": [
{color: "White", image: "white_image_url",value:"linen-white"},
{color: "Black", image: "black_image_url",value:"linen-black"}
]
};
function populateColorOptions(selectedFabric) {
var colorsDropdown = $('#colors');
colorsDropdown.empty();
colorsDropdown.append('<option value="" hidden selected>Please select</option>');
var fabricColors = fabricColorMap[selectedFabric];
this code populate the options
if (fabricColors) {
fabricColors.forEach(function(colorOption) {
var option = $('<option>');
option.val(colorOption.value);
option.text(colorOption.color);
option.data('imageSrc', colorOption.image); // Store image URL as data attribute
colorsDropdown.append(option);
});
}
}
$('#fabrics').change(function() {
var selectedFabric = $(this).val();
this dropdown is depends on the previous one if previous one selected then this will
populate its values
if (selectedFabric) {
populateColorOptions(selectedFabric);
$('#color-dropdown').show(); // Show the color dropdown
} else {
$('#color-dropdown').hide(); // Hide the color dropdown if no fabric is selected
}
});