JQuery 插件选择在我的 Ionic 应用程序中不起作用答案

【问题标题】：JQuery plugin Chosen not working in my Ionic appJQuery 插件选择在我的 Ionic 应用程序中不起作用
【发布时间】：2016-07-23 11:57:42
【问题描述】：

我正在使用 JQuery 插件 CHOSEN 进行多选。但是它不起作用。它不是创建一个下拉列表，选项是可见的，甚至不能选择它们。

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>

【问题讨论】：

您检查控制台是否有错误消息？看起来您没有在第二个文件中加载脚本
是的，检查了控制台是否有错误，但没有错误..
如何在第二页加载脚本？
chzn-select 类在哪里？
现在编辑了我的代码..

标签： javascript jquery html ionic-framework

【解决方案1】：

你的依赖没有按照顺序。让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>

检查依赖关系以了解更多详细信息订购

【讨论】：

<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> 有一些困惑。找出哪个取决于什么
能否粘贴firebug的控制台结果

【解决方案2】：

我复制了你的代码并在本地机器上完成了这个。试试这个它有效

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

所有文件都在同一个文件夹中。我从这个链接下载所有文件 Chosen download Link

查看顺序。它对插件的工作很重要

【讨论】：

prism.js 中有什么？
它是 CHOSEN 对动态功能的依赖项。使用上面的链接选择下载，获取 prism.js 并添加此依赖项以使用选择