Question

I have a series of select dropboxes setup, with content that dynamically updates depending upon the preceeding selection. It works fine selecting in series.

When I try to go back to the top and start again, even though I have attempted to reset all children using

my_select.selectedIndex = 0;

The child select boxes remain unchanged. I had thought it was a Javascript error, but found the JSFiddle example actually worked, but my code within JQuery mobile does not work – leading me to believe it is a JQuery Mobile related issue

You can see a JSFiddle example at http://jsfiddle.net/vinomarky/xfcdF/

Steps to replicate:

1. Select ‘Casing’ from Type
2. Select 5 from OD
3. Change Type to Tubing

The JSFiddle example behaves as it should – resetting children to “-“, while my ‘live’ JQuery Mobile example does not

Any ideas as to why?

Answer 1

You’re manipulating the DOM behind jQuery Mobile’s back but never telling jQuery Mobile that anything has changed.

You need to call the refresh method after you change the underlying <select>:

refresh update the custom select

This is used to update the custom select to reflect the native select element’s value.If the number of options in the select are different than the number of items in the custom menu, it’ll rebuild the custom menu.

So you need to add things like this:

$('#od').selectmenu('refresh');

at the bottom of your change handlers. The element to refresh does, of course, depend on which change handler you’re in.

Demo: http://jsfiddle.net/ambiguous/n3VXe/

Your fiddle worked fine because it didn’t use jQuery Mobile at all.

Also, you shouldn’t be using onchange attributes in 2012, you’re loading jQuery so you should use it to bind handlers to the events you’re interested in. You might want to replace all your direct DOM manipulation with jQuery as well.