Sinatra(erb)：如何通过下拉选择框构建带taskid的REST请求链接

要实现这个需求，你需要结合ERB渲染下拉选项，再用JavaScript动态更新链接的href属性——静态ERB模板无法实时获取用户选中的任务ID，必须靠前端脚本处理交互逻辑。

步骤1：在ERB中渲染任务下拉框 #

给每个数据集对应的下拉框设置唯一ID（关联数据集ID），同时渲染所有预配置任务作为选项：

<html>
  <head>
    <title>List of all registered runs</title>
    <script>
      function updateAnalyseLink(datasetId) {
        // 获取当前数据集对应的下拉框和链接元素
        const selectElement = document.getElementById(`task-select-${datasetId}`);
        const linkElement = document.getElementById(`analyse-link-${datasetId}`);
        // 获取选中的任务ID
        const selectedTaskId = selectElement.value;
        // 更新链接的href属性
        linkElement.href = `datasets/${datasetId}/add_task/${selectedTaskId}`;
        // 根据是否选中任务启用/禁用链接
        if (selectedTaskId) {
          linkElement.removeAttribute('disabled');
        } else {
          linkElement.setAttribute('disabled', true);
          linkElement.href = '#';
        }
      }
    </script>
  </head>
  <body>
    <p>
      Runs
    </p>
    <table>
    <% @datasets.each do |dataset| %>
    <tr>
      <td>Name</td>
      <td><%= dataset.name %></td>
      <td>
        <!-- 渲染任务下拉框，绑定change事件触发链接更新 -->
        <select id="task-select-<%= dataset.id %>" onchange="updateAnalyseLink(<%= dataset.id %>)">
          <option value="">选择任务...</option>
          <% @tasks.each do |task| %>
            <option value="<%= task.id %>"><%= task.name %></option>
          <% end %>
        </select>
      </td>
      <td>
        <!-- 给链接设置唯一ID，初始状态禁用 -->
        <a id="analyse-link-<%= dataset.id %>" href="#" disabled>Analyse</a>
      </td>
    </tr>
    <% end %>
    </table>
  </body>
</html>

关键细节说明 #

• 每个下拉框和链接通过dataset.id生成唯一ID，确保JS能精准定位当前数据集对应的元素，避免多数据集交互冲突。
• 下拉框的onchange事件触发updateAnalyseLink函数，实时将选中的任务ID替换到链接URL中。
• 初始状态下链接设为禁用，避免用户未选择任务时误点击。

可选优化（现代事件绑定方式） #

如果不想用内联事件绑定，可改用全局事件监听：

document.addEventListener('DOMContentLoaded', function() {
  const taskSelects = document.querySelectorAll('[id^="task-select-"]');
  taskSelects.forEach(select => {
    select.addEventListener('change', function() {
      const datasetId = this.id.split('-')[2];
      const selectedTaskId = this.value;
      const linkElement = document.getElementById(`analyse-link-${datasetId}`);
      
      if (selectedTaskId) {
        linkElement.href = `datasets/${datasetId}/add_task/${selectedTaskId}`;
        linkElement.removeAttribute('disabled');
      } else {
        linkElement.href = '#';
        linkElement.setAttribute('disabled', true);
      }
    });
  });
});

这种方式更符合前端规范，同时保留了根据选中状态启用/禁用链接的逻辑。

内容的提问来源于stack exchange，提问作者Marc Hoeppner