After attempting various solutions without success, I am reaching out for help as I am unable to find a fitting solution for my problem. The issue at hand is adding images to select list options based on the option value, with the limitation of not being able to modify the select list's HTML structure due to it being automatically generated within the application.
- Adding images to select list options based on their values is the main objective.
- Constraints include the inability to alter the select list's HTML structure by adding attributes such as
data-classordata-value.
While exploring different approaches, I came up with the following code snippet. However, implementing this code resulted in an error stating
$(...).selectmenu is not a function$("#edit-field-app-paragraphs-und-add-more-type").selectmenu().on('change', function(ev) {
$(this).attr('class', '').addClass($(this).children(':selected').val());
});#edit-field-app-paragraphs-und-add-more-type option[value="app_1_column_layout"] { background-image: url('images/onecol.png'; }
#edit-field-app-paragraphs-und-add-more-type option[value="app_2_column_layout"] { background-image: url('images/twocol.png'; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="edit-field-app-paragraphs-und-add-more-type">
<option value="app_1_column_layout">App: 1 Column Layout</option>
<option value="app_2_column_layout">App: 2 Column Layout</option>
</select>To view the issue on the website, visit this link.