HTML

Question

为什么：我的网站将潮汐时间作为一个小功能（因此不是主要功能）。

什么: 作为该潮汐时间功能的一部分，我想为用户提供 select 位置的 'drop down' 一组选项，并且默认潮汐时间随用户更新 selection.

为什么它不起作用： select 选项后，table 消失。它不应该消失。它应该使用所选位置进行更新。

会喜欢一些 help/direction。 过去一周一直让我发疯。

长摘要： 我正在将网站连接在一起，并且我有一个潮汐时间小部件/html 片段。只有代码片段没有提供用户更改位置的选项。我希望自定义 html 页面以包含下拉列表，并且 selected 值替换 src url 位置。然后小部件更新更改（不是整个页面）。

我在这里学到了很多东西。但我是新手 - 所以我可能违反了一些基本规则。

会喜欢一些 help/direction。过去一周一直让我发疯。

我一直在研究，下面的代码是我想出的。

<select onChange="ChangeLocation(value)">
  <option value="-">Select region</option>
  <option value="barry">Barry</option>
  <option value="aldeburgh">Aldeburgh</option>
</select>

 
 <script type="text/javascript">
      function ChangeLocation(value)
      {
          var s = document.createElement("script");
          s.type = "text/javascript";
          s.src = "https://www.tidetimes.org.uk/" + value + "-tide-times.js";
          s.id = "tidetable";
          s.async = true;
          document.getElementById("output").innerHTML = "";
          document.getElementById("output").appendChild(s);
         
      }
  </script>
  
  
<div id="output">
    <script id="tidetable" type="text/javascript" src="https://www.tidetimes.org.uk/aldeburgh-tide-times.js"></script>
</div>

Answer 1

我已经使用 https://github.com/krux/postscribe 的“postscribe”解决了这个问题。

我在 <script> 标签中使用来自 cdn 的 postscribe：

<script src="https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js"></script>

那么，<body>标签的内容如下：

<select onChange="ChangeLocation(value)">
    <option value="-">Select region</option>
    <option value="barry">Barry</option>
    <option value="aldeburgh">Aldeburgh</option>
</select>


<script type="text/javascript">
    function ChangeLocation(value) {

        var s = document.createElement("script");

        s.src = "https://www.tidetimes.org.uk/" + value + "-tide-times.js";

        document.getElementById("output").innerHTML = "";

        postscribe('#output', s.outerHTML);

    }
</script>

<div id="output"></div>

HTML - 潮汐时间 - 根据用户输入更改来源 url

HTML - tide times - change source url based on user input

function

script