Multiple select options - A new problem!

Anon

Howdy,

Let's say you have this on your page:

I then want to code some javascript that will add/delete/move options in the select list.

Is there anyway to return all the options when you submit the form in the order they appear during submission regardless of whether they're selected or not?

I was thinking something like:
<option name="sel[1]">1

etc. But then this could have issues with order...

Any help would be appreciated!

Thanks,
Aragon

Anon

Aragon,

Could you explain in more detail what you want to do.

Is there anyway to return all the options when you submit the form in the >>order they appear during submission regardless of whether they're selected or >>not?

What do you mean?

Do you want to dynamically update a select list after someone submits?

Anon

I have a database of items and I want the user to be able to change the display order that the items are displayed in. I want to make some code that will pull all the items out of the database and slot them into a <select> element. From there the user must be able to select one item and then click an "up" or "down" button to move it up and down in the select list. I can do this with JavaScript/DHTML no problem. When the user has reordered the items in the list he clicks submit and all the items must be submitted in their new order. For example:

<form action="<? echo($PHP_SELF); ?>" method="post">
<select name="sel[]" size="5">
<option>item1
<option>item2
<option>item3
</select>
<input type="button" value="Up" onClick="moveItemUp()">
<input type="button" value="down" onClick="moveItemDown()">
</form>

When the user clicks the "up" button my "moveItemUp()" javascript function will reorder the options in the select list dynamically. Once the user is done reordering, he submits and all the options must be returned in their new order.

Anon

Well, that sounds difficult as I understand it.

I want to make some code that will pull all the items out of the
database and slot them into a <select> element.

Have you coded this part yet?

For the last part, as I understand it.

I believe that you have a multiple select :
<select name = 'sel[]' multiple size = '5'>

and you want all of those values to go into your database!?

you can run a loop to insert those values into your db

if($submit)
{

      for($i=0; $i<=count($sel); $i++)
         {

$insert = mysql_query("INSERT INTO TABLE_NAME (field_name) VALUES ('$sel[$i]',')", $db) or die("erroe");

         }

//run a loop to insert all the values from the array
}

Is this on track?

Anon

No no. Not a multiple select. The user must never be able to select multiple items at a time. In fact, it shouldn't matter whether he selects any items or not.

What my code needs to be able to do is return all the items in a select list regardless of whether they're selected or not. Plus, it must return these items in the order they're displayed.

Anon

use a hidden field (and populate it with the values from the listbox when the user submits). dont know if you can make a hidden field an array or not...probably though. if not, just comma separate the values.

Anon

Yea I thought of that too. Problem is how do you check which items in the select list are selected using javascript? I don't think it's possible. Do you know of a way?

Anon

This is how i handle select lists...not totally sure of cross-browser, or browser versions (what works where), but everything seems to work in IE and Netscape that I've tested.

To find out which item(s) are selected, for example:

for (i = 0; i < document.frm.sel.length; i++)
if (document.frm.sel.item(i).selected)
//item is selected

But I'm a little confused of what you were asking for... I thought you already had the list ordered, dynamically, using javascript. So, anyway, here's what i know...if it helps any.

To remove an item from a list:
document.frm.sel.remove(i);

To add an item to a list:
var elt = document.createElement('option');
elt.value = 'val';
elt.text = 'text';
document.frm.sel.add(elt);
delete elt;

Form a csv string of all the items in a list:
var s = "";
for (i = 0; i < document.frm.sel.length; i++)
s += document.frm.sel.item(i).text + ",";

Anon

Neat. That answered my question 🙂. Thanks for the help!

axismundi

A convenient way to solve this is to mark all of your options as "selected" by using a Javascript function.
This will transfer all of your options.