Question

我正在尝试使用Selectize.js设置一个简单的选择框，并在页面加载时不断收到错误消息，使其无法正常工作。

这是错误

这是代码......我只是想让第一个选择框工作，这样对方就没有id或jquery了。似乎jquery由于某种原因与selectize.js冲突，我无法弄清楚。尝试以不同的方式组织脚本标签，但没有用。

$(function() {
  $('#select-category').selectize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" type="text/css" media="all" href="css/selectize.css">
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="scripts/scripts.js"></script>
  <script type="text/javascript" src="scripts/selectize-custom.js"></script>
  <script type="text/javascript" src="scripts/selectize.min.js"></script>

</head>
<body>

    <header>
        <div class="wrapper">
            <a href="" title="">
                <h1 id="logo">Maark</h1>
            </a>
            <div class="nav-bar">
              <form>
                <label>Single selection
                <select id="select-category">
                  <option value="0">Zero</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
                  <option value="4">Four</option>
                </select>
                </label>
                <label>Multiple selection
                <select multiple>
                  <option value="0">Zero</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
                  <option value="4">Four</option>
                </select>
                </label>
              </form>
            </div>
        </div>
    </header>

    <div class="main-container container-fluid">

          <ul class="row">
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="brub" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="#" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
              <li class="gallery-list-item col-md-3 col-sm-4">
                  <figure>
                      <a class="" href="#">
                          <img class="img-responsive" src="images/sample-thumb.png" alt="">
                      </a>
                      <figcaption>
                          <a href="" title="">01_homepage-dashboard</a>
                      </figcaption>
                  </figure>
              </li>
        </ul>


    </div>





</body>
</html>

Answer 1

您的selectize.js似乎未正确包含在当前文件中。

首先，您需要检查js文件的当前路径是否有效。

还尝试在当前路径中添加点斜杠。等;

这也是本地添加的jQuery文件的一个常见问题。检查：

the latest

jQuery与Selectize.js冲突

1 个答案: