javascript - 单击以从选择框中进行选择

Question

我正在使用 Django 和 Zurb-foundation。

在某个页面上，我一方面将一堆项目组织在一个表格中，显示它们的属性。另一方面，在同一页面上，我有一个包含选择框的表单，其中的元素是前面提到的项目。现在原则上随着项目数量的增加，在表单的选择框中找到一个会变得很无聊。我想，如果您单击显示在表格上的其中一项，请在选择框中选择相同的项目。

我该怎么做？我对 javascript 完全一无所知，但如果你至少能提到相关的关键概念，我会学习它们。

谢谢!

Answer 1

请查看这个 JSFiddle:http://jsfiddle.net/zvCvL/5/

虽然我已经留下了一些详细说明应该如何完成的评论，但我将总结如下:

• 使用 Django 的模板引擎的循环功能循环遍历每个项目及其描述(这部分将留给您自己解决，但我在 fiddle 中给您留下了一个链接以帮助您开始) 例如，您将在每个循环中将这些添加到 tbody 中:

  <!-- loop iteration one -->
  <tr>
      <td class="item1">Item 1</td>
      <td class="item1">The first item</td>
  </tr>
  

  但是请不要忘记，我的方法要求在每次迭代中为 td 指定一个唯一的名称。

• 然后，您可以处理下拉菜单。这将需要一个更简单的循环，只需将它们添加到充当下拉列表的 ul 中:

  <!-- loop iteration one -->
  <li class="item1"><a>Item 1</a></li>
  

  再一次，这需要一个唯一的类名，但要与表中项目的类名相对应。

• 最后，您需要处理 JavaScript。简单地说，您可以检查用户是否将鼠标悬停在 li 上，检查它属于哪个类，并对具有相同类的所有元素应用某种颜色。当然，需要注意的是，这将作用于所有 列表元素。我会留给您根据需要进行更改。

希望这对您有所帮助! (最终结果为:http://jsfiddle.net/zvCvL/5/embedded/result/)