jQuery插件选择在我的Ionic应用程序中不起作用
[英]JQuery plugin Chosen not working in my Ionic app
问题描述
I am using JQuery plugin CHOSEN for multiple select. 
我正在使用JQuery插件CHOSEN进行多项选择。 However it is not working. 但是，它不起作用。 It is not creating a drop down list and the options are visible and even can not select them. 它不是创建下拉列表，选项是可见的，甚至无法选择它们。
index.html 的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: 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>
2 个解决方案
解决方案1
0 2016-04-04 04:28:18
Your dependency is not following order. 您的依赖关系不遵循顺序。 let X plugin depend on y so y plugin should be added first .so possible order is 让X插件取决于y所以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>
check the dependency of for more details ordering 检查依赖关系以获取更多详细信息
解决方案2
0 2016-04-04 07:41:31
I replicated your code and done this on local machine.Try this it works 我复制了你的代码并在本地机器上完成了。试试这个它有效
<%@ 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>
All file on all same folder .i download all file from this link Chosen download Link 所有文件都位于同一文件夹.i中，从此链接下载所有文件选择下载链接
See the order.Its important for plugin to work 查看订单。它对插件的工作很重要
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.