使用 Javascript 创建列表答案

【问题标题】：Creating Lists with Javascript使用 Javascript 创建列表
【发布时间】：2011-07-16 23:09:51
【问题描述】：

我正在查询三个数据库，并希望在三个可点击列表中显示它们的列。我希望用户从这些列表中选择一些列，然后按下按钮，只有选定的列和它们来自的列表/表将被传递给一个函数进行处理。

我在网上找到了一些使用表单执行此操作的代码。没有表格有没有办法做到这一点？我习惯于将 JList 与 java 一起使用，并且对 javascript 的经验很少。

对一个列表执行类似于我尝试执行的操作（使用表单）的代码是：

http://www.mredkj.com/tutorials/tutorial006.html

编辑：我刚刚发现了 Javascript ListBoxes。我想我只是要使用它们。似乎在创建列表时使用表单是不可避免的。

【问题讨论】：

您能否提供更多详细信息，例如您如何构建您的列表以及您找到的代码。如果您动态构建页面，那么您实际上不需要 javascript，因为您可以简单地提交页面并返回新结果。 Javascript 只能用于“逐步”增强您的网页。

标签： javascript html forms html-lists parameter-passing

【解决方案1】：

jQuery 是一个非常简单的 JavaScript 库，用于执行此类操作（以及一般的用户交互）。

例如，如果您想选择表格的第二列并将单元格的数据存储到数组中，这个简单的代码就可以做到（我因犯错误而臭名昭著，如果没有，请纠正我):

var elements = [];

$('#id_of_your_table tr td:eq(1)').each(function()
{
  elements.push($(this).html());
});

现在，elements 包含表格第二列的值。

我想你说的是普通的 'ol HTML <select>。将其粘贴到 HTML 文档中以了解我的意思。

<select id="my_listbox" multiple="yes" size="6">
  <option>Foo 1</option>
  <option>Foo 2</option>
  <option>Foo 3</option>
  <option>Foo 4</option>
  <option>Foo 5</option>
  <option>Foo 6</option>
</select>

要获得选定的值，这段代码应该可以工作：

var values = [];

$('#my_listbox :selected').each(function(i, selected)
{
  textvalues[i] = $(selected).text();
});

如果您的用户不知道如何检查项目，编写自己的可检查列表框真的很容易。在此处查看我的示例：http://jsfiddle.net/2hDVR/2/。

【讨论】：

我没有对表格做任何事情。我将生成 3 个列表，它们是列标签，用户选择他想要使用的列，单击它们都按下按钮，然后它们都被传递给处理它们的函数
你是怎么做的？它们只是大量的<div> 标签吗？
我还没有列出清单。我在问制作它们的最佳方法。我已经将 JLists 与 Java 一起使用，并希望 javascript 具有相同的功能
你能解释一下它们的外观吗？如果您有三个垂直列表，那么表格将是理想的，但每种情况需要的代码略有不同。
我想我会使用 ListBoxes

【解决方案2】：

Javascript 不会“制作列表”。列表是 HTML。你的 JavaScript 可以渲染 HTML，但我假设你还是从服务器获取的。

我可能会通过 HTML 来做到这一点：

<ul>
    <li><label><input type="checkbox" id="column1" />column 1</label></li>
    <li><label><input type="checkbox" id="column2" />column 2</label></li>
    <li><label><input type="checkbox" id="columnn" />column n</label></li>
</ul>

我不确定您想在没有表格的情况下执行此操作。无论哪种方式，您都需要将数据传回服务器以获取数据以呈现完整的表格。这就是表格的用途。

【讨论】：