2014-06-19 8 views
0

Je crée ma nouvelle application, il s'agit d'une application d'infrastructure mobile jQuery. J'utilise ajax pour charger plusieurs des sélections avec des options.Jquery mobile - sélectionnez le menu valeur de modification après modification

Par exemple, je créer un élément dans le code:

var select = $('<select name="someSelect" data-placeholder="false" class="select-additional" data-native-menu="false" />'); 

Et puis j'ai un appel ajax, et j'enregistrer des objets à var ajaxItems, je fais une boucle et ajouter les options à la sélection.

for(var i in ajaxItems){ 
    val option = $('<option val="'+ajaxItems[i].val+'">'+ajaxItems[i].val+' Days</option>'); 
    select.append(option); 
} 

Et maintenant, tout va bien, jQuery rend la page avec des sélections, et ça a l'air bien.

Mais j'ai un problème:

Je veux faire quelque chose comme ça: Lorsque l'utilisateur clique sur une sélection, la valeur d'option doit être définie en tant que chaîne en sélection, par défaut le texte de l'option est réglée, mais je veux un valeur, par exemple, si l'utilisateur clique sur l'option:

<option value="1">1 day</option> 

Je veux faire la chaîne de sélection comme 1, non pas comme 1 jour, parce que j'ai entrées de sélection très petites, et l'unité (jours) n'est pas important ..

Code de rendu mobile jQuery:

<div class="ui-select"> 
    <a href="#select-27-listbox" role="button" id="select-27-button" aria-haspopup="true" class="ui-btn ui-btn-a ui-corner-all ui-shadow" data-rel="popup"><span class="select-additional">4 Tage</span></a> 
    <select data-native-menu="false" data-id="4084" data-icon="false" data-theme="a" class="select-additional" data-placeholder="false" tabindex="-1"> 
     <option value="0">0 </option> 
     <option value="1">1 Tag</option> 
     <option value="2">2 Tage</option> 
     <option value="3">3 Tage</option> 
     <option value="4">4 Tage</option> 
     <option value="5">5 Tage</option> 
    </select> 
</div> 

Et im essayant de faire quelque chose comme ça:

$('ui-select').change(function(
    $(this).prev().find(span.select-additional).text($(this).val()); 
)); 

Mais il pas un changement d'étiquette, j'ai une certitude de 90%, je fait son ok, quand dans le journal l'objet $(this).prev().find(span.select-additional).text(), C'est en me montrant une valeur, mais la valeur avant le changement! Par exemple, si je prends 1, il montre 0, puis quand je prends 2, il montre 1.

Je pense que le problème est: J'essaie de changer la valeur, mais avant jQuery mobile fait cela, et jQuery mobile écrase mon texte ...

Je sais que c'est possible parce que je l'ai vu sur une autre page mobile jQuery, mais j'ai besoin d'un rappel après que jQuery a défini la valeur ... Ou un peu de retard?

+0

étrange, sur jsFiddle son travail ... http://jsfiddle.net/kudej/6gK44/ –

Répondre

0

Ok, j'ai trouvé la réponse. J'ai vu le problème sur les autres pages, tout d'abord tout allait bien, et ma méthode donne un effet. Mais d'autres pages, il n'y a pas d'effet, la solution d'un code de marque à la page créer:

$(document).on("pagecreate", function() { 
      $('select').change(function() { 
       var value = $(this).val(); 
       var element = $(this); 
       element.prev().find('.select-additional').text(value); 
      }); 
}); 
Questions connexes