jquerymobile to change icon in selectmenu

Question

Hopefully this is really straightforward and simple. I can't select the selectmenu in JQM. please see the jsfiddle at the bottom.

I just want to dynamically change the icon from downarrow to star. I can't seem to even 'select' the selectmenu though using an id. Only badly using a class. I've left in a few of the tonnes of things I've tried, can someone show how to do it properly please.

I was expecting this to work. But I've tried this and lots more with no luck.

$('#foo').selectmenu({ icon: "star" });

JSFiddle

http://api.jquerymobile.com/selectmenu/#option-iconpos

Answer 1

• You have to call it before the page is created, here is a JsFiddle with the pagebeforecreate.

  $(document).on( "pagebeforecreate", "#page", function( event ){
      $('select').selectmenu({ icon: "star", iconpos: "left" });
  });`
  

• You could use the removeClass and addClass on the parent of the select instead of the select itself after the page is created : JsFiddle

Do you absolutely need to do it dynamically ? Otherwise you could just use the data attributes :

data-icon="star" data-iconpos="left"