Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    dcp
    dcp is offline
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple Select Chooser Problem

    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>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I dared to build for you a simplier code. Try this:
    Code:
    <!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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •