1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2001
    Rep Power

    Question Moving Items Up/Down/etc in Select Box w/ Javascript


    I am creating a my.evolutionm.net section for my site where I have a list of different features that a user can select to display on their own page. Once the user selects these items he/she can also order them or switch them from the left side to right side.

    Here's some detail that may help explain what I'm wanting:

    I use php to pull up all the features the user has selected in the database. All features can either display on the left side or right side of the page, but I have a default setting for each feature and that's what the user will have when they first select an item. The reason for the left side/right side is that one side is narrower, while the other is much larger for more info.

    I now want the user to be able to reorder these items as well as move them from the left side to the right side, w/ javascript. My idea would have two select boxes with multiple items on either side. The left box will host all left column items and the right box will hold all right column items. The user can then select an item and move it up or down in the list or move it to the other box if they like.

    I would like to do this section similar to how Yahoo has their my.yahoo.com, but I'm not very good with javascript. Is this a complicated script that's required or could I find something over the web or through these forums to complete this. If this is complicated, could someone estimate what a developer would charge for something like this?


  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Rep Power

    Not sure if this fits the bill, but I dumped it onto another board a while back - so there's no work involved...

    <style type="text/css">

    input, select, td {
    font: 200 10px verdana, helvetica, arial, sans-serif;
    text-align: center;
    background: darkorange;

    td {
    background: black;
    color: ivory;

    body {
    text-align: center;
    margin: 100px;
    background: #775555;

    <script type="text/javascript" language="javascript">

    var destMAX = 8; //maximum number of items in dest list

    function inDest(dest, text, value) {
    var opt, o = 0;
    while (opt = dest[o++]) if (opt.value == value && opt.text == text) return true;
    return o > destMAX;

    function toDest(s, dest) {
    var opt, o = 0;
    while (opt = s[o++]) if (opt.selected && !inDest(dest, opt.text, opt.value))
    dest.options[dest.length] = new Option(opt.text,opt.value);
    if (navigator.appName == 'Netscape' &&
    (navigator.appVersion.indexOf('Win') != -1 ||
    navigator.appVersion.indexOf('Mac') != -1))

    //courtesy M. Honnen /////////////
    //http://www.faqts.com ///////////
    function moveSelected (select, down) {
    if (select.selectedIndex != -1) {
    if (down) {
    if (select.selectedIndex != select.options.length - 1)
    var x = select.selectedIndex + 1;
    else {
    if (select.selectedIndex != 0)
    var x = select.selectedIndex - 1;
    var swapOption = new Object();
    swapOption.text = select.options[select.selectedIndex].text;
    swapOption.value = select.options[select.selectedIndex].value;
    swapOption.selected = select.options[select.selectedIndex].selected;
    swapOption.defaultSelected = select.options[select.selectedIndex].defaultSelected;
    for (var property in swapOption)
    select.options[select.selectedIndex][property] = select.options[x][property];
    for (var property in swapOption)
    select.options[x][property] = swapOption[property];

    function delSelected(dest) {
    var opt, o = 0;
    while (opt = dest[o++]) if (opt.selected) dest[o-1] = null;

    function setHidden(f) {
    var destVals = new Array(), opt = 0, separator = '|', d = f.dest;
    while (d[opt]) destVals[opt] = d[opt++].value;
    f.destItems.value = separator + destVals.join(separator) + separator;
    alert('destItems.value = ' + f.destItems.value); //demo only
    return true;

    <form name="marquepick" action="" method="get" onsubmit="return false;">
    <table cellspacing="0" cellpadding="3" border="3"><tr>
    <td>&amp;#149; pick marque</td>
    <td>&amp;#149; rank marque</td>
    <td>&amp;#149; edit &amp;#149;</td>
    <td>&amp;#149; submit &amp;#149;</td>
    <select name="src" id="src" size="8" style="width:76px;"
    <option value="Toyota">Toyota</option>
    <option value="Honda">Honda</option>
    <option value="Mercedes">Mercedes</option>
    <option value="Opel">Opel</option>
    <option value="Audi">Audi</option>
    <option value="BMW">BMW</option>
    <option value="Volkswagen">Volkswagen</option>
    <option value="Drebnik">Drebnik</option>
    &amp;#187;<br />&amp;#187;<br />&amp;#187;<br />&amp;#187;<br />&amp;#187;<br />&amp;#187;
    <select name="dest" size="8" style="width:76px;">
    </td><td align="center">
    <input type="button" value="move up" onclick="moveSelected(dest,false)" /><br /><br />
    <input type="button" value="move dn" onclick="moveSelected(dest,true)" /><br /><br />
    <input type="button" value="&amp;nbsp;delete&amp;nbsp;"
    onclick="delSelected(dest)" />
    </td><td align="middle">
    <input type="hidden" name="destItems" />
    <input type="submit" value="&amp;nbsp;send&amp;nbsp;" onclick="return setHidden(this.form)" />

IMN logo majestic logo threadwatch logo seochat tools logo