2016-04-04 9 views
1

JQueryプラグインCHOSENを複数選択するために使用しています。しかし、それは動作していません。ドロップダウンリストが作成されておらず、オプションも表示され、選択することもできません。JQueryプラグイン私のIonicアプリケーションで選択されていない

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コード:

<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

コンソールでエラーメッセージが表示されましたか? 2番目のファイルにスクリプトをロードしていないようです。 –

+0

はい、エラーはコンソールにチェックされていますが、エラーはありません。 –

+0

2ページ目にスクリプトを読み込む方法は? –

答えて

0

あなたの依存関係は、次のされていないため。 Xプラグインがそうyプラグインが最初の.so可能順序を追加する必要がありyに依存せ

<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> 

+0

注文が –

+0

'<スクリプトsrcは= "JS/chosen.jquery.js">私にエラーを与えた –

+0

firebug –

0

を注文詳細についての依存関係を確認している私はあなたのコードを複製し、ローカルmachine.Tryでこれをこれを行ってそれはすべて同じフォルダにあるすべてのファイルは、このリンク Chosen download Link

からすべてのファイルをダウンロードしてください.I

<%@ 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> 

の作品

注文を確認してください。プラグインが動作するのに重要です。

+0

prism.jsには何がありますか? –

+0

上記のリンクで選択された動的機能.downloadに対するCHOSENの依存関係です.project.jsを取得し、この依存関係を追加して、選択した –

関連する問題