Question

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

Answer 1

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