Creating Lists with Javascript

I am querying three databases and want to show their columns in three click-able lists. I want the user to select a number of columns from these lists and then on pressing a button, only the selected columns and the lists/tables that they came from would be p开发者_开发百科assed to a function for processing.

I found some code online that does this with forms. Is there any way to do this without forms? I am used to using JList with java and have little experience with javascript.

.

The code that does something similar to what I am trying to do (with forms) for one list is:

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

EDIT: I just found out about Javascript ListBoxes. I think I am just going to use them. It seems like using forms is going to inevitable when creating lists.

---

jQuery is a really simple JavaScript library for doing things like this (and for user interaction in general).

For example, if you want to select the second column of a table and store the cells' data into an array, this simple code would do it (I'm notorious for making mistakes, so correct me if it doesn't):

var elements = [];

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

Now, elements contains the values of the second column of the table.

---

You're talking about plain 'ol HTML <select>, I think. Paste this into an HTML document to see what I mean.

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

To get the selected values, this code should work:

var values = [];

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

---

If your users can't figure out how to check the items, writing your own checkable listbox is really easy. Check out my example here: http://jsfiddle.net/2hDVR/2/.

---

Javascript doesn't 'make lists'. Lists are HTML. Your JavaScript can render HTML, but I assume you're getting this from the server anyways.

I'd probably do this via 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>

I'm not sure what you are asking in regards to wanting to do this without a form. Either way you need to pass data back to the server to get the data to render the completed table. That's what forms are for.