Creating Lists with Javascript

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.

Could you provide more details like how you building your your lists and the code that you found. If you building your page dynamically then you dont really need javascript as you could simply submit the page and return the new results. Javascript should only be used to "progressively" enhance you web page. — Alistair Laing
– Alistair Laing, Commented Mar 16, 2011 at 21:37

Blender · Accepted Answer · 2011-03-16 22:07:24Z

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

edited Mar 16, 2011 at 22:07

answered Mar 16, 2011 at 21:35

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

slimbo Over a year ago

I am not doing anything with tables. I am going to generate 3 lists that are the column labels and the user selects which columns he wants to use, clicks them all presses a button and then they are all passed to a function that processes them

Blender Over a year ago

How are you making them? Are they just tons of <div> tags?

slimbo Over a year ago

I havent made the lists yet. I am asking the best way to go about making them. I have used JLists with Java and am hoping javascript would have the identical functionality

Blender Over a year ago

Can you explain how they should look? A table would be ideal if you have three vertical lists, but each situation requires slightly different code.

slimbo Over a year ago

I think I am going to use ListBoxes

|

DA. · Accepted Answer · 2011-03-16 21:52:18Z

1

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.

answered Mar 16, 2011 at 21:52

DA.

40.8k51 gold badges162 silver badges219 bronze badges

Collectives™ on Stack Overflow

Creating Lists with Javascript

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related