2016-04-04 5 views
1

Ich verwende das JQuery-Plugin CHOSEN für die Mehrfachauswahl. Es funktioniert jedoch nicht. Es wird keine Dropdown-Liste erstellt, und die Optionen sind sichtbar und können nicht ausgewählt werden.JQuery-Plug-in Nicht in meiner Ionic-App verwendet.

index.html

<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
<title></title> 

<link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet"> 
<link href="css/chosen.css" rel="stylesheet"> 
<link href="css/jquery-ui.css" rel="stylesheet"> 

<script src="lib/ionic/js/ionic.bundle.js"></script> 

<script src="cordova.js"></script> 

<script src="js/app.js"></script> 
<script src="js/jquery.js"></script> 
<script src="js/jquery-ui.js"></script> 
<script src="js/chosen.jquery.js"></script> 

</head> 
</html> 

chosen.html Code:

<head> 
<script type="text/javascript"> 
$(function() { 
    $(".chzn-select").chosen(); 
}); 
</script> 
</head> 

<ion-view view-title="Profile"> 
<ion-content class="padding"> 

<div> 
    <label class="item item-input"> 
     <div class="input-label">Enter Your Option</div> 
      <select class="chzn-select" multiple="true" name="faculty" style="width:1000px;"> 
       <option value="Option 2.1">Option 2.1</option> 
       <option value="Option 2.2">Option 2.2</option> 
       <option value="Option 2.3">Option 2.3</option> 
      </select> 
    </label> 
</div> 
</ion-content> 
</ion-view> 
+0

zu arbeiten Haben Sie die Konsole für eine Fehlermeldung überprüfen? Es sieht so aus, als ob Sie die Skripte nicht in die zweite Datei laden würden. –

+0

ja die Konsole auf Fehler überprüft, aber keine Fehler. –

+0

Wie man Skripte auf der 2. Seite lädt? –

Antwort

0

Ihre Abhängigkeit wird folgende Reihenfolge nicht. lassen X Plugin hängen von y so y Plugin ersten .so möglich hinzugefügt werden sollte, ist

<link href="css/style.css" rel="stylesheet"> 
<link href="css/jquery-ui.css" rel="stylesheet"> 
<link href="css/chosen.css" rel="stylesheet"> 
<link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
<script src="js/jquery.js"></script> 
<script src="js/jquery-ui.js"></script> 
<script src="js/chosen.jquery.js"></script> 
<script src="js/app.js"></script> 
<script src="lib/ionic/js/ionic.bundle.js"></script> 
<script src="cordova.js"></script> 

Überprüfung der Abhängigkeit für weitere Details der Bestellung

+0

die Reihenfolge Sie mir vorgeschlagen hat einen Fehler –

+0

' 'hat etwas Verwirrung.finden Sie heraus, welche davon abhängig ist –

+0

Können Sie das Console-Ergebnis von einfügen Firebug –

0

ich Ihren Code repliziert und das diese auf lokalen machine.Try getan es funktioniert

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="plugin_CHOSEN.aspx.cs" Inherits="DATATABLE_plugin_CHOSEN" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    <link href="prism.css" rel="stylesheet" type="text/css" /> 
    <link href="chosen.css" rel="stylesheet" type="text/css" /> 
    <script src="jquery-2.1.4.min.js" type="text/javascript"></script> 
    <script src="chosen.jquery.js" type="text/javascript"></script> 
    <script src="prism.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $(".chzn-select").chosen(); 
     }); 
</script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

<ion-view view-title="Profile"> 
<ion-content class="padding"> 

<div> 
    <label class="item item-input"> 
     <div class="input-label">Enter Your Option</div> 
      <select class="chzn-select" multiple="true" name="faculty" style="width:1000px;"> 
       <option value="Option 2.1">Option 2.1</option> 
       <option value="Option 2.2">Option 2.2</option> 
       <option value="Option 2.3">Option 2.3</option> 
      </select> 
    </label> 
</div> 
</ion-content> 
</ion-view> 
    </div> 
    </form> 
</body> 
</html> 

Alle Datei auf allen gleichen Ordner .i Chosen download Link

von diesem Link alle Datei herunterladen

anzeigen order.Its wichtig für Plugin

+0

Was ist in prism.js? –

+0

Es ist eine Abhängigkeit von gewählt für dynamische Funktionalität. Download mit obigen Link gewählt, erhalten prism.js und fügen diese Abhängigkeit zu arbeiten mit ausgewählten –

Verwandte Themen