...

View Full Version : Multiple Select Chooser Problem



dcp
08-04-2006, 10:14 PM
I'm using code from Gizmola's MySQL/PHP Tutorial, and am having a terrible time getting the JavaScript Chooser to work.

The code below is supposed to move values from one form element to another by clicking an HTML button. Trouble is, when I select one option to move, it moves as anticipated, but all the options above it (except the topmost) disappear.

The code is below. I apologize if this is obvious, but I'm not seeing it.

dcp

____________________



<script language="JavaScript">
<!-- Begin
sortitems = 1; // Sort list items? (1=yes)

function move(fbox,tbox) {
for(var i=0; i<fbox.options.length; i++) {
if(fbox.options[i].selected && fbox.options[i].value != "") {
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
}
BumpUp(fbox);
if (sortitems)
SortD(tbox);
}
function BumpUp(box) {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].value == "") {
for(var j=1; j<box.options.length-1; j++) {
box.options[j].value = box.options[j+1].value;
box.options[j].text = box.options[j+1].text;
}
var ln = i;
break;
}
}

if(ln < box.options.length) {
box.options.length -= 1;
BumpUp(box);
}
}
function SortD(box) {
var temp_opts = new Array();
var temp = new Object();

for (var i=0; i<box.options.length; i++) {
temp_opts[i] = box.options[i];
}
for (var x=0; x<temp_opts.length-1; x++) {
for(var y=(x+1); y<temp_opts.length; y++) {
if(temp_opts[x].text > temp_opts[y].text) {
temp = temp_opts[x].text;
temp_opts[x].text = temp_opts[y].text;
temp_opts[y].text = temp;
temp = temp_opts[x].value;
temp_opts[x].value = temp_opts[y].value;
temp_opts[y].value = temp;
}
}
}
for(var i=0; i<box.options.length; i++) {
box.options[i].value = temp_opts[i].value;
box.options[i].text = temp_opts[i].text;
}
}
function SelectListAll(box) {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].value != "") {
box.options[i].selected = true;
}
}
return true;
}
// End -->
</script>


<form action="?action=load" method="post" name="site_form" >

<table>
<tr>
<td style="width: 200px;"><select name="list_u[]" multiple="multiple" size="7">
<option value="1">Bernalillo</option>
<option value="2">Catron</option>
<option value="3">Chaves</option>
<option value="4">Cibola</option>
<option value="5">Colfax</option>
<option value="6">Curry</option>
<option value="7">De Baca</option>
<option value="8">Dona Ana</option>
<option value="9">Eddy</option>
<option value="10">Grant</option>
</select>
</td>

<td style="width: 100px; text-align: center;"><input type="button" value=" >> " onclick="move(document.forms[0].elements['list_u[]'],document.forms[0].elements['list_s[]'])"><br />

<input type="button" value=" << " onclick="move(document.forms[0].elements['list_s[]'],document.forms[0].elements['list_u[]'])"></td>

<td style="width: 200px;">
<select name="list_s[]" size="7" multiple="multiple">
</select></td></tr></table></td></tr><tr><td>&nbsp;</td><td><input name="submit" type="button" value="Submit" /></td></tr></table><br /><br />
</form>

Kor
08-05-2006, 02:47 PM
I dared to build for you a simplier code. Try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
//2006 Genuine code by Corneliu "Kor" Lucian RUSU corneliulucian[at]gmail.com"
var n=['list_u[]','list_s[]']//set here the names of the the two list boxes
function moveIt(f,b){
var s1=(b)?f[n[0]]:f[n[1]];
var s2=(b)?f[n[1]]:f[n[0]];
for(var i=s1.length-1;i>=0;i--){
var o=s1.options[i]
o.selected?s2.length>0?sortIt(s2,o):s2.appendChild(o):null;
}
}
function sortIt(s2,o){
for(var i=0;i<s2.length;i++){
if(Number(o.value)<Number(s2.options[i].value)){
s2.insertBefore(o,s2.options[i]);break
}
else if(i==s2.length-1){
s2.appendChild(o)
}
}
}
</script>
</head>
<body>
<form action="?action=load" method="post" name="site_form" >
<table>
<tr>
<td style="width: 200px;"><select name="list_u[]" multiple="multiple" size="7">
<option value="1">Bernalillo</option>
<option value="2">Catron</option>
<option value="3">Chaves</option>
<option value="4">Cibola</option>
<option value="5">Colfax</option>
<option value="6">Curry</option>
<option value="7">De Baca</option>
<option value="8">Dona Ana</option>
<option value="9">Eddy</option>
<option value="10">Grant</option>
</select>
</td>

<td style="width: 100px; text-align: center;"><input type="button" value=" >> " onclick="moveIt(this.form,true)"><br />

<input type="button" value=" << " onclick="moveIt(this.form,false)"></td>

<td style="width: 200px;">
<select name="list_s[]" size="7" multiple="multiple">
</select></td></tr></table></td></tr><tr><td>&nbsp;</td><td><input name="submit" type="button" value="Submit" /></td></tr></table><br /><br />
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum