时间戳

首页 > 解决方案 > 如何在本地使用 selectize.js？

php - 如何在本地使用 selectize.js？

问题描述

我正在使用动态加载到引导模式中的选择表单。我正在使用 selectize.js 使此选择可搜索。有人可以告诉我如何在本地机器上使用 selectize.js 吗？（我不想每次都从 Internet 选择库中加载...）

  1. 我的“index.php”文件
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css">


    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css"> <!-- locally -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- locally -->
    <script src="bootstrap/js/bootstrap.min.js"></script> <!-- locally -->
</head>
<body>
  

<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-backdrop="static" data-target="#myModal" onClick="fillModal();">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">MyModal Test</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div><!-- Modal End -->


<script>
function fillModal() {
    $(".modal-body").empty().load("select.php", function(){
        $('select').selectize({
            sortField: 'text'
        });
    });
}
</script>
</body>
</html>
  1. 我的“select.php”文件
<?php
echo '<select id="select-state" placeholder="Pick a state..." style="width:350px" required>';
echo '    <option value="">Select a state...</option>';
echo '    <option value="AL">Alabama</option>';
echo '    <option value="AK">Alaska</option>';
echo '    <option value="AZ">Arizona</option>';
echo '    <option value="AR">Arkansas</option>';
echo '    <option value="CA">California</option>';
echo '    <option value="CO">Colorado</option>';
echo '    <option value="CT">Connecticut</option>';
echo '    <option value="DE">Delaware</option>';
echo '    <option value="DC">District of Columbia</option>';
echo '    <option value="FL">Florida</option>';
echo '    <option value="GA">Georgia</option>';
echo '    <option value="HI">Hawaii</option>';
echo '    <option value="ID">Idaho</option>';
echo '    <option value="IL">Illinois</option>';
echo '    <option value="IN">Indiana</option>';
echo '</select>';
?>

标签： phpjquerybootstrap-modalselectize.js

解决方案

我解决了我的问题。我下载了必要的文件并将它们全部放在名为“includes”的目录中。包含文件的顺序存在依赖性。您的 HEAD 部分必须看起来完全像这样：

<head>
<script src="includes/jquery.min.js"></script>
<script src="includes/selectize.min.js"></script>
<link rel="stylesheet" href="includes/selectize.bootstrap3.min.css">
</head>

推荐阅读