2011-05-26 7 views
2

Cela devient un peu fou. J'ai essayé le code depuis des heures et pas de chance:JQuery Mobile Select Box ne fonctionne pas

<div data-role="fieldcontain"> 
    <label for="select-choice-1" class="select">Choose shipping method:</label> 
    <select name="select-choice-1" id="select-choice-1"> 
     <option value="standard">Standard: 7 day</option> 
     <option value="rush">Rush: 3 days</option> 
     <option value="express">Express: next day</option> 
     <option value="overnight">Overnight</option> 
    </select> 
</div> 

De:

http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-selects.html

Quand je teste sur mon portable, il n'y a pas ... en fait menu déroulant, rien hapens du tout.

Je suis en train d'oublier quelque chose?

+0

Quel est votre navigateur ou plate-forme mobile? –

Répondre

7

Si vous regardez la source de la page web que vous pouvez voir est dans une balise de formulaire:

<form action="#" method="get"> 

Donc Ajouter ce entre les balises de formulaire serait obtenir les résultats souhaités: Live Example Link

<form action="#" method="get"> 
    <div data-role="fieldcontain"> 
     <label for="select-choice-1" class="select">Choose shipping method:</label> 
     <select name="select-choice-1" id="select-choice-1"> 
      <option value="standard">Standard: 7 day</option> 
      <option value="rush">Rush: 3 days</option> 
      <option value="express">Express: next day</option> 
      <option value="overnight">Overnight</option> 
     </select> 
    </div> 
</form> 

Un autre problème pourrait être:

Essayez d'ajouter cette balise à la liste déroulante: Live Example Link

data-native-menu="false" 
+0

Cela a résolu le problème pour moi, merci! –

0

ressemble à une pâte de copier directement à partir du lien avez-vous inclus jquery et jquery mobile?

+0

Oui, c'est ... N'est-ce pas un exemple? – Satch3000

+0

c'est un exemple et si c'est le balisage exact que vous avez utilisé, mais si ce n'est pas le cas, nous devons voir le balisage que vous avez utilisé. aussi toujours se demander à propos de l'inclusion des fichiers – mcgrailm

1

J'ai eu le même problème et la décision est dans les bibliothèques connectées

J'inclus dans la balise head ce css

code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css 

et ce

code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js 

et tout fonctionne bien !

0

J'ai eu ce problème récemment, et la réponse acceptée ne l'a pas arrangée pour moi. Dans le processus de création d'une question là-dessus, je me suis dit la solution:

Lorsque vous utilisez à la fois l'interface utilisateur jQuery et jQuery Mobile, UI doit venir avant mobile dans votre liste des scripts.

J'ai eu ceci:

<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

Ce qui a donné lieu à l'interface utilisateur ayant la priorité sur mes éléments de forme, particulièrement visible dans les menus de sélection. J'ai changé ces déclarations, et les menus ont été améliorés par Mobile correctement.