导入引导程序时Javascript不起作用答案

【问题标题】：Javascript not working when import bootstrap导入引导程序时Javascript不起作用
【发布时间】：2019-10-31 08:08:08
【问题描述】：

我正在尝试在我的网页中实现这个搜索栏：https://github.com/jeffersonRibeiro/jquery-simpleSelect 但是当我导入引导程序时它似乎不起作用。

我试图查看我是否错误地导入了东西，但似乎没有任何效果。搜索栏真正起作用的唯一时间是我注释掉引导导入

我使用的导入只是来自：https://getbootstrap.com/docs/4.0/getting-started/introduction/。仅链接 Bootstrap 样式表似乎无法使其正常工作，我不知道为什么。有什么想法吗？

这是html文件：

  $(document).ready(function(){
                    $('#segment').simpleSelect();
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<meta charset="UTF-8">
        <title>Simple select with search</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
        <link rel="stylesheet" href="simpleSelect.css">
    </head>
    <body>
        <form>
            <select id="segment" name="segmentation">   
                <option data-defaultSelected>Select</option>
                <option>JAVASCRIPT</option>
                <option>PHP</option>
                <option>BRAZIL</option>
                <option>CANADA</option>
                <option>MEAN</option>
            </select>
    
            <!-- <input type="submit"/> -->
        </form>

Javascript：https://github.com/jeffersonRibeiro/jquery-simpleSelect/blob/master/src/js/simpleSelect.js

CSS：https://github.com/jeffersonRibeiro/jquery-simpleSelect/blob/master/src/css/simpleSelect.css

当我取消注释引导样式表的链接时会出现问题

【问题讨论】：

让我们首先告诉我们您在浏览器控制台中遇到的错误。那么，您的问题中的minimal reproducible example 怎么样？
请在发布到本网站的代码示例中准确地告诉我们您是如何编码的。
有什么想法吗？还是卡住了

标签： jquery html bootstrap-4

【解决方案1】：

./ 在 URL 中表示当前目录。

所以更改<script src="./src/js/simpleSelect.js"></script> 以访问正确的目录。

要运行 jQuery 函数，它们需要被包装在 function 或 document.ready 中

<script>
$(document).ready(function(){
        $('#segment').simpleSelect();
});
</script>

【讨论】：

我将它们全部放入一个文件夹并更改了链接它们的方式，但这似乎不是问题。我已经尝试过使用 document.ready，但它也不起作用
那么 HTML 与 simpleselect 的 javascript 和 CSS 在同一个文件夹中？
是的，搜索栏与注释掉的引导导入一起使用，但如果不是，则它不起作用。我认为问题不是由于访问了正确的目录，因为它在添加引导导入之前确实有效。