HTML 和 JavaScript 代码在在线 HTML 编辑器上工作，但不在本地机器上答案

【问题标题】：HTML & JavaScript Code working on Online HTML Editor but not on local machineHTML 和 JavaScript 代码在在线 HTML 编辑器上工作，但不在本地机器上
【发布时间】：2019-07-16 03:47:40
【问题描述】：

我正在尝试创建一个选择菜单，允许用户通过键入或从列表中选择一个选项来选择它。该代码适用于（JSfiddle）等在线编辑器。问题是当我尝试使用 Chrome 或 Firefox 在本地计算机上打开选择列表时，它无法按预期工作。

这是我在在线编辑器上使用的 HTML 代码 (select.html)：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />

  <div id="select-container">
  <select id="test" style="width:150px">
    <optgroup label="Group 1">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </optgroup>
    <optgroup label="Group 2">
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
      <option value="6">Option 6</option>
      <option value="6.1">Option 6.1</option>
    </optgroup>
  </select>
  </div>
  </body>
</html>

我刚刚在我的本地机器上的 HTML 正文中添加了以下行来加载 JS 文件：

<script src="select.js"></script>

这是我的 JS 代码（select.js）：

/* jshint esnext: true */
$("#test").select2();

optgroupState = {};

$("body").on('click', '.select2-container--open .select2-results__group', function() {
  $(this).siblings().toggle();
  id = $(this).closest('.select2-results__options').attr('id');
  index = $('.select2-results__group').index(this);
  optgroupState[id][index] = !optgroupState[id][index];
});

$('#test').on('select2:open', function() {
  $('.select2-dropdown--below').css('opacity', 0);
  setTimeout(() => {
    groups = $('.select2-container--open .select2-results__group');
    id = $('.select2-results__options').attr('id');
    if (!optgroupState[id]) {
      optgroupState[id] = {};
    }
    $.each(groups, (index, v) => {
      optgroupState[id][index] = optgroupState[id][index] || false;
      optgroupState[id][index] ? $(v).siblings().show() : $(v).siblings().hide(); 
    });
    $('.select2-dropdown--below').css('opacity', 1);
  }, 0);
});

That's what I'm getting on my online editor 但是，我得到了一个普通列表，它会立即在我的本地计算机上显示所有选项，并且没有用于用户输入的文本框。

任何建议将不胜感激。谢谢:)

【问题讨论】：

查看开发工具的网络面板以确保脚本正在加载。或者在脚本顶部添加console.log('test 123')。也有可能在加载 jQuery 之前运行代码
Chrome 或 Firefox 控制台错误如何？
是的，它在控制台内打印出“test 123”，这意味着它链接正确。并且没有控制台错误
您的预期行为是什么？
尝试将<script src="select.js"></script> 放在body 标签关闭之前。

标签： javascript jquery html css ajax

【解决方案1】：

您需要在 select.js 中加载文档后运行脚本。另外，请检查您在 jsfiddle 上的配置，了解脚本的运行方式。

如下附上你的js代码。

$( document ).ready(function() {
    /* your entire js code goes here */
});

【讨论】：

用您提供的内容封装后，它现在可以工作了。 :) 我之前试过，但最后没有分号。非常感谢

【解决方案2】：

检查<script src="select.js"></script>中的文件路径。可能是 select.js 和你的 html 文件不在同一个文件夹中。

【讨论】：

是的，我确实检查过并在日志中打印了一条消息，并在控制台上输出了