Question

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

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

def validate_ship_positions(fleet_grid: List[List[str]], ship_char:List[str], ship_sizes: List[int]) -> bool:

fleet_grid = [['a','.','b'], ['a','.','.'], ['a','.','.']]

(each sublist is one row in the matrix)

ship_char: ['a', 'b']

(defines all the characters in the matrix)

ship_sizes: [3, 1]

(defines the sizes of the ship)

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

<!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>

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

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

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

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

Answer 1

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

如下所示封装您的js代码。

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

Answer 2

检查path=/中的文件路径。可能是select.js和您的html文件不在同一文件夹中。

HTML和JavaScript代码可在Online HTML Editor上运行，但不能在本地计算机上运行

2 个答案: