Re-arranging values in a multi select box..

fluff · #1 (**permalink**) 02-21-04, 02:26 PM

Hi!

I've got a list of names in a MySQL table. I output these names to a multi select box using PHP. Now i'd like to be able to re-arrange those names in the list by first selecting a name with the mouse, and then use either a button named "Move up in list" or one named "Move down in list". I have no idea on how to do this though, and I've tried finding a script on the 'net that does something similiar, with no luck. So now I turn to you guys =).

Also, after having re-arranged those names, I'd like to be able to submit the form and pass the list of names back to PHP so I can update the table in MySQL.

Any help would be greatly appreciated!

jimcart · #2 (**permalink**) 02-22-04, 02:37 AM

Not sure about a multi select box
but these are the steps I would use to achieve a result

1. place all values into a javascript array
2. create your list on the fly from the array
3. when the move up button is clicked
identify which item has has been selected
4. find that items index in the array
5. move that item up in the array
6. recreate the list on the fly from the array

same for the move down button.

innerHTML -- might be useful for creating your listbox on the fly

Regards,
Jim.

Everything is possible even the impossible -- pretty sure that the above is possible.

jimcart · #3 (**permalink**) 02-23-04, 04:26 AM

This might give you a start
It is a Wide Lookup script that drives a select list from
a javascript array

If you need me to create move up-down buttons
send me an email -- jimcart@jimcart.com

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT TYPE="text/javascript">
/***********************************************
* Wide Lookup script- © JimCart (www.jimcart.com)
* This notice must stay intact for use
* at no time shall any part of this script be obfuscated
* or included in any third party application without consent.
* If you modify this script please send a copy to jimcart@jimcart.com
* Visit http://www.jimcart.com/ To Download This Script
***********************************************/

var rvalue="";
var ypos=0;
var ymax=0;

function windowopener(message) {
options = "toolbar=0,location=0,menubar=0,resizable=1,scroll bars=0,width=450,height=550,screenX=15,screenY=100 ,top=15,left=100";
msgWindow=window.open("","displayWindow",options);
msgWindow.document.open();
msgWindow.document.write (message);
msgWindow.document.close();
msgWindow.focus();
}

function showpopup(popFormName,popTextID,popTextName) {
elem = document.getElementById(popTextID);
seld = elem.value;
x = ("<HEAD><TITLE>Details</TITLE>" +
"<SCRIPT TYPE=\"text/javascript\">" +
"var ypos=0;" +
"var ymax=0;" +
"var yheight=0;" +
"var seld=\"" + elem.value + "\";" +
"var rvalue=\"" + elem.value + "\";" +
"var fieldlist=[\"\"];" +
"var fieldcounter=0;" +
"function addfield(field){" +
" fieldlist[fieldcounter]=(field);" +
" fieldcounter++;" +
"}");
x = (x + "function ok() {" +
" if (window.opener && !window.opener.closed) {" +
" window.opener.document." + popFormName + "." + popTextName + ".value=rvalue;" +
" }" +
" close();" +
"}" +
"function cancel() {" +
" close();" +
"}" +
"function rstore(svalue) {" +
" rvalue=svalue;" +
"}");
for (i=0;i<=(fieldlist.length-1);i++){
x = (x + "addfield([\"" + fieldlist[i][0] + "\"]);");
if (fieldlist[i][0] == elem.value) {
ypos = i;
}
}
ymax = i;
x = (x + "function doscroll() {" +
" elem1 = document.getElementById('scrollbox1');" +
" elem2 = document.getElementById('sel1');" +
" elem1.scrollTop=(elem2.scrollHeight * (" + ypos + "/" + ymax + "));" +
"}" +
"</" + "SCRIPT>" +
"</HEAD>" +
"<BODY>");
x = (x + "<CENTER>" +
"<DIV ID='scrollbox1' align=center style='color: #000000; background-color: #CCCCCC; border: solid 2px black; width: 400px; height: 450px; overflow: scroll;'>" +
"<SCRIPT TYPE=\"text/javascript\">" +
"document.write(\"<SELECT ID='sel1' NAME'Select1' SIZE='" + fieldlist.length + "' onchange='javascript:rstore(this.options[this.selectedIndex].value)'>\");" +
"for (i=0;i<=(fieldlist.length-1);i++){" +
" if (seld == fieldlist[i][0]){" +
" document.write('<option SELECTED>' + fieldlist[i][0] + '</option>');" +
" } else {" +
" document.write('<option value=\"' + fieldlist[i][0] + '\">' + fieldlist[i][0] + '</option>');" +
" }" +
"}" +
"document.write(\"</SELECT>\");" +
"</" + "SCRIPT>" +
"</DIV>" +
"<P><INPUT TYPE='BUTTON' NAME='Button1' VALUE='OK' STYLE='width: 80px' ONCLICK='javascript:ok();'> " +
"<INPUT TYPE='BUTTON' NAME='Button1' VALUE='Cancel' STYLE='width: 80px' ONCLICK='javascript:cancel();'>" +
"</P>" +
"</BODY>" +
"<SCRIPT TYPE=\"text/javascript\">" +
" doscroll();" +
"</" + "SCRIPT>");
windowopener(x);
}

var fieldlist=[""];
var fieldcounter=0;
function addfield(field){
fieldlist[fieldcounter]=(field);
fieldcounter++;
}

//fieldlist -- "value"
addfield(["select from list"]);
addfield(["this is the field 1"]);
addfield(["this is the field 2"]);
addfield(["this is the field 3"]);
addfield(["this is the field 4"]);
addfield(["this is the field 5"]);
addfield(["this is the field 6"]);
addfield(["this is the field 7"]);
addfield(["this is the field 8"]);
addfield(["this is the field 9"]);
addfield(["this is the field 10 ggg gggggg ggggggg ggggggg gggggg ggggggg gggggg gggggg gggggg gggg"]);
for (i=0;i<=(400);i++){
addfield(["this is field" + i]);
}

</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER="0" WIDTH="100%" CELLSPACING="4" CELLPADDING="4">
<TR WIDTH="100%">
<TD><FORM name="aaaForm">
<P><INPUT ID="aaaID" TYPE="TEXT" NAME="aaaText" VALUE="this is the field 6" WIDTH="80" SIZE="30" READONLY="READONLY"><INPUT TYPE="BUTTON"
NAME="Button1" VALUE="lookup" ONCLICK="javascript:showpopup('aaaForm','aaaID','a aaText');"></P>
</FORM>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

fluff · #4 (**permalink**) 02-24-04, 10:45 AM

Thanks alot for the help! I combined your ideas and thoughts with mine and created a solution that works just the way I like it =)