26225

Customizing jQuery selectmenu dropdown button on after item selected?

Question:

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

Have:

<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?

Answer1:

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>.

Recommend

  • 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?