jquery liste déroulante multipage mobile n'affiche pas la valeur sélectionnée

Question

J'ai écrit mon premier site mobile jquery en utilisant leur modèle multipage.

Dans mon application, les modifications dans la page principale peuvent affecter la valeur sélectionnée dans une liste déroulante dans une sous-page. La première fois que je vais à la sous-page, l'option correcte est sélectionnée et affichée. Après cela, quand je vais à la sous-page, l'option correcte est sélectionné (cochée), mais la mauvaise option est affichée.

J'ai créé un jsFiddle pour démontrer ... http://jsfiddle.net/afePj/2/

première page vous permet de sélectionner une option ...

<select name="selectname1" id="selectid1" onChange="changePageTwo()"> 
    <option value="1">A</option> 
    <option value="2">B</option> 
    <option value="3">C</option> 
</select> 

... et définit la valeur sélectionnée à la page deux pour correspondre. ..

function changePageTwo() { 
    select1 = document.getElementById('selectid1'); 
    select2 = document.getElementById('selectid2'); 
    select2.selectedIndex = select1.selectedIndex; 
} 

... lorsque vous arrivez à la page deux, je voudrais que la valeur sélectionnée soit affichée. Mais après que la page a été affichée une fois, l'option ne change jamais il montre ...

<select name="selectname2" id="selectid2"> 
    <option value="1">A</option> 
    <option value="2">B</option> 
    <option value="3">C</option> 
</select> 

Toutes les idées sur la façon dont je peux faire la sous-page afficher la valeur sélectionnée?

Merci

Answer 1

Lorsque vous mettez à jour un menu de sélection dans jQuery Mobile vous devez appeler le menu select menu widget'srefresh afin que l'affichage est mis à jour pour correspondre aux éléments natifs

Par exemple

$('selectid2').selectmenu('refresh'); 

http://jsfiddle.net/afePj/4/