CODEWITHSUNDEEP
jquery-mobileselect-menu
devsie
devsie

Reputation: 131

jquerymobile to change icon in selectmenu

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

Upvotes: 0

Views: 116

Answers (2)

ezanker
ezanker

Reputation: 24738

If you want to change the icon after the widget has been initialized, you can call selectmenu("destroy") and then reinitialize:

$('#foo').selectmenu("destroy").selectmenu({
    icon: "star",
    iconpos: "left"
});

DEMO

In the demo click the button to see the icon change to a star and move to the left.

Upvotes: 1

Romain Derie
Romain Derie

Reputation: 516

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

Upvotes: 1

Related Questions