Customizing jQuery selectmenu dropdown button on after item selected?


I'm looking to create a dropdown for colors that has each color as a small square next to the item.


<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/iqDIY.png" data-original="https://i.stack.imgur.com/iqDIY.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Want (roughly):

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/Mhk2X.png" data-original="https://i.stack.imgur.com/Mhk2X.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

<a href="http://jsfiddle.net/1fa2oc2c/" rel="nofollow">This version (jsfiddle)</a> works fine for the dropdown items themselves, but I'd like the button to also update to have the colored square next to it.

$.widget("custom.coloriconselectmenu", $.ui.selectmenu, { _renderItem: function (ul, item) { var li = $("<li>", {text: item.label}); var bgColorStyle = 'background-color:' + item.element.attr("data-color"); var fullStyle = "float: left; width: 21px; height: 19px; margin-right: 7px;" + bgColorStyle; $("<div>", {style: fullStyle}).appendTo(li); return li.appendTo(ul); } }); $("#selectId").coloriconselectmenu({icons: {button: "custom-button"}});

Is there a good way to modify the dropdown button on value update to include the color square like in the dropdown?


Modify your code as follows so that it responds to the change event:

$( "#selectId" ).coloriconselectmenu({ icons: { button: "custom-button" }, change: function(event, ui){ var selectedColor = $(this).find("option:selected").attr("data-color"); //alert(selectedColor); var hiddenSelectMenuBtn = "#" + $(this).attr("id")+"-button .ui-selectmenu-text" //alert($(hiddenSelectMenuBtn).text()); var fullStyle = "float: left; width: 21px; height: 19px; margin-right: 7px; background-color:" + selectedColor; $("<span>", {style: fullStyle}).prependTo($(hiddenSelectMenuBtn)); });

You need to select the "select menu text", which isn't readily exposed via a function or property.

You can see this in action in the <a href="http://jsfiddle.net/jhend2099/oqwterae/1/" rel="nofollow">updated jsfiddle</a>.


  • Error: this.element.uniqueId is not a function. JQuery UI. Anyone seen this before?
  • how set individual styles (css) for option in selectmenu (jquery-ui: selectmenu)
  • Transfer data attributes from option tags to UI selectmenu items
  • Get attributes of existing SVG elements and bind as data with d3.js
  • how to swap Image in jquery
  • Set value of radio button based on user selected options
  • Update data in d3.js group
  • jquery draggable stop event
  • How to get a android ListView item selector to use state_pressed
  • Inserting a (g) node in the middle of a tree (SVG) using jQuery
  • Build an array of ids of all select boxes
  • changes in jquery 1.4.2 breaking the code?
  • Function JavaScript : on Menu CSS HTML
  • Can't delete li from to-do list
  • jquery code not working without breakpoint
  • Cut the background to expose the layer below
  • SAVE attribute needed for Fortran variables when only the C_LOC address is returned to a C program?
  • saving file generated by TCPDF
  • d3 v4 drag and drop with TypeScript
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Using jQuery closest() method with class selector
  • Change JButton Shape while respecting Look And Feel
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • jQuery tmpl and DataLink beta
  • Jquery - Jquery Wysiwyg return html as a string
  • How to delete a row from a dynamic generate table using jquery?
  • using HTMLImports.whenReady not working in chrome
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?