Question

我是javascript和jQuery的新手，但我正在尝试使用Chosen插件。我已经按照我能找到的所有步骤进行了操作，但它无法正常工作。这是我到目前为止所做的。

index.blade.php：

<html lang="en" ng-app="wim">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>WIM(afy)</title>

    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/wimmain.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="bower_components/chosen/chosen.css" rel="stylesheet">

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/lodash/lodash.js"></script>
    <script src="bower_components/angular-route/angular-route.min.js"></script>
    <script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
    <script src="bower_components/restangular/dist/restangular.min.js"></script>

    <script src = "js/app.js"></script>
    <script src = "js/services.js"></script>
    <script src = "js/controllers.js"></script>

    <style>

        li {
            padding-bottom: 8px;
        }

    </style>
</head>

<body style="background-color: lightgray;">     
    <div ng-view></div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/chosen/chosen.jquery.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function(){
            $(".chosen-select").chosen();
        });
    </script>
</body>

我已将样式表包含在顶部，并在我包含jQuery之后和我的脚本之前包含了selected.jquery.js。实际的HTML页面显示在<div ng-view></div>。

的位置

这是html：

<select class="chosen-select" id="interests" multiple="true" ng-model="interests">
    <option value="Art">Art</option>
    <option value="Biking">Biking</option>
    <option value="Camping">Camping</option>
    <option value="Coffee">Coffee</option>
    <option value="Concerts">Concerts</option>
    <option value="Dining">Dining</option>
    <option value="Running">Running</option>
    <option value="Shopping">Shopping</option>
</select>

现在只显示正常的HTML 5多选列表，您必须按住shift或使用ctrl选择多个内容。

我是否需要以不同方式移动代码？有人可以帮我弄清楚我做错了什么吗？感谢。

Answer 1

不确定这是否是您的问题，但我必须触发之前选择的更新。试试$("#interests").trigger("update")

实现jQuery插件选择不生效

1 个答案: