www.webdeveloper.com
Results 1 to 8 of 8

Thread: Dynamically changing drop down boxes

  1. #1
    Join Date
    Jun 2013
    Posts
    4

    Dynamically changing drop down boxes

    Hi All.
    I have a javascript function that changes the value of the next dropdown box from a list of multiple dropdown boxes based on an onchange event as shown below.
    What I want to do is if the user selects for instance "software manufacturer" then it is never available again in any of the next dropdown boxes.
    I can get this to work for the second checkbox but it comes back again for the 3rd checkbox and so on.

    Hope it makes sense
    Code:
    onchange="fillSelect(this,categories[this.value]
    Code:
    var categories = [];
    categories["startList"] = ["Software Manufacturer","Product Name","Product Version","Keep Existing","Ignore"]
    categories["Software Manufacturer"] = ["Product Name","Product Version","Keep Existing","Ignore"];
    categories["Product Name"] = ["Software Manufacturer","Product Version","Keep Existing","Ignore"];
    categories["Product Version"] = ["Software Manufacturer","Product Name","Keep Existing","Ignore"];
     categories["Keep Existing"] = ["Software Manufacturer","Product Name","Product Version","Keep Existing","Ignore"];
     categories["Ignore"] = ["Software Manufacturer","Product Name","Product Version","Keep Existing","Ignore"];

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,444
    Show your "fillSelect" function.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,444

    Lightbulb

    I'm assuming you want something like this...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    
    </head>
    <body>
    
    <table>
      <tr>
        <td>
          <select id="SBox0" onclick="NewList('SBox0','SBox1')">
          <option value="Software Manufacturer">Software Manufacturer</option>
          <option value="Product Name">Produce Name</option>
          <option value="Product Version">Produce Version</option>
          <option value="Keep Existing">Keep Existing</option>
          <option value="Ignore">Ignore</option>
    
    <!-- Original example options -->
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
    
          </select>
        </td>
        <td>
          <select id="SBox1" onclick="NewList('SBox1','SBox2')">
          <option value=""></option>
          </select>
        </td>
        <td>
          <select id="SBox2">
          <option value=""></option>
          </select>
        </td>
      </tr>
    </table>
    
    <script type="text/javascript">
    
    function NewList(selObj,newObj) {
      var selElem = document.getElementById(selObj);
      var selIndex = selElem.selectedIndex;
      var newElem = document.getElementById(newObj);
      var tmp = '';
      newElem.options.length = 0;
      for (var i=0; i<selElem.options.length; i++) {
        tmp = selElem.options[i].value;
        if (i != selIndex) { newElem.options[newElem.options.length] = new Option(tmp,tmp); }
      }
    }
    </script>
    
    </body>
    </html>
    See: http://www.javascriptsource.com/form...wn-list-2.html

  4. #4
    Join Date
    Jun 2013
    Posts
    4
    Hi JMRKER

    here is my fillselect function you required

    Code:
    function fillSelect(sel,ary,nxt){
     if (ary&&sel.form){
      var frm=sel.form,nme=sel.name.replace(/\d/g,""),i=Number(sel.name.replace(/\D/g,""))+1,nxt=frm[nxt],z0=0;
      while (frm[nme+i]){
       frm[nme+i].length = 1;
       frm[nme+i].selectedIndex=0;
       i++;
      }
      for (;z0<ary.length;z0++){
       nxt.options[z0+1]=new Option(ary[z0],ary[z0]);
      }
      nxt.selectedIndex=0;
     }
    }

  5. #5
    Join Date
    Jun 2013
    Posts
    4
    here is the fillselect you requested and i forgot to mention that if the user selects

    keep exisiting
    or
    ignore

    then these two values will always show in the next boxes, i am only concerned about, software_manufacturer,product_name and product_version not being available twice

    hope im making sense

    [code]

    function fillSelect(sel,ary,nxt){
    if (ary&&sel.form){
    var frm=sel.form,nme=sel.name.replace(/\d/g,""),i=Number(sel.name.replace(/\D/g,""))+1,nxt=frm[nxt],z0=0;
    while (frm[nme+i]){
    frm[nme+i].length = 1;
    frm[nme+i].selectedIndex=0;
    i++;
    }
    for (;z0<ary.length;z0++){
    nxt.options[z0+1]=new Option(ary[z0],ary[z0]);
    }
    nxt.selectedIndex=0;
    }
    }

    [\code]

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,444

    Lightbulb

    I'm a bit confused about the logic of your request.

    Since the select box changes the display when each is selected in turn,
    how is the user supposed to know what is to be "keep existing" and which is to be "ignore"d?

    I would suggest something like this...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    
    </head>
    <body>
    
    <table>
      <tr>
        <td>
          <select id="SBox0" onclick="NewList('SBox0','SBox1')">
           <option value="Software Manufacturer">Software Manufacturer</option>
           <option value="Product Name">Produce Name</option>
           <option value="Product Version">Produce Version</option>
          </select>
          <br><input type="radio" value="keep" name="rbtn0" checked> Keep existing
          <br><input type="radio" value="ignore" name="rbtn0"> Ignore
        </td>
        <td>
          <select id="SBox1" onclick="NewList('SBox1','SBox2')">
          <option value=""></option>
          </select>
          <br><input type="radio" value="keep" name="rbtn1"> Keep existing
          <br><input type="radio" value="ignore" name="rbtn1" checked> Ignore
        </td>
        <td>
          <select id="SBox2">
          <option value=""></option>
          </select>
          <br><input type="radio" value="keep" name="rbtn2"> Keep existing
          <br><input type="radio" value="ignore" name="rbtn2" checked> Ignore
        </td>
      </tr>
    </table>
    
    <script type="text/javascript">
    
    function NewList(selObj,newObj) {
      var selElem = document.getElementById(selObj);
      var selIndex = selElem.selectedIndex;
      var newElem = document.getElementById(newObj);
      var tmp = '';
      newElem.options.length = 0;
      for (var i=0; i<selElem.options.length; i++) {
        tmp = selElem.options[i].value;
        if (i != selIndex) { newElem.options[newElem.options.length] = new Option(tmp,tmp); }
      }
    }
    </script>
    
    </body>
    </html>
    ... but then again, I may not be understanding the purpose of the script.

  7. #7
    Join Date
    Jun 2013
    Posts
    4
    screendump.jpg

    hi there,


    the purpose of the script is, I have columns in text boxes on the left hand side from a spreadsheet, and on the right hand side the drop downs, so if the user select keep existing then the original column name will be inserted into the database, if they choose ignore then it wont, the software_manufacturer, product_name and product_version will always be there and can only be inserted once.

    I have attached a print screen hope it help you figure my logic out


    thanks

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,444

    Lightbulb

    You might be better off creating one selection list and one chosen list and move the choices between them.
    When the use has finished their selections, use either list to query your database.
    Would be a lot easier to maintain than the way you are currently trying to code.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    
    </head>
    <body>
    <div id="container">
    
    <form action="" method="post" name="moveList">
    
    <table width="450" border="0">
      <tr>
        <td align="center">
        <select name="namesLeft" size="6" multiple="multiple" id="namesLeft">
        
        <option value="Product Name">Product Name</option>
        <option value="Product Version">Produce Version</option>
        <option value="Part Number" >Part Number</option>
        <option value="Edition">Edition</option>
        <option value="Invoice Number">Invoice Number</option>
        <option value="Supplier" >Supplier</option>
        <option value="Purchase Officer">Purchase Officer</option>
        
        </select></td>
        
    <td width="100" align="center" ><input name="" onclick="moveItem('namesLeft','namesRight');" type="button" value=">>" />
        <input name="" onclick="moveItem('namesRight', 'namesLeft');" type="button" value="<<" /></td>
        
        <td align="center">
        
        <select name="namesRight" size="6" multiple="multiple" id="namesRight"> 
        <option value="Software Manufacturer">Software Manufacturer</option>
    <!--     
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value="" ></option>
        <option value="" ></option>
    -->  
        </select></td>
      </tr>
    </table>
    
    </form>
    
    </div>
    <script type="text/javascript">
    // Modified from: http://www.sitepoint.com/forums/showthread.php?997887-Move-selection-list-items-from-left-to-right-using-javascript
    
    function moveItem( a, b ) {
      var fromBox = document.getElementById( a ),
          toBox = document.getElementById( b );
    
      for( var i = 0, opts = fromBox.options; opts[ i ]; i++ )   {
        if( opts[ i ].selected )     {
          toBox.value = opts[i].value;
    
          if( toBox.selectedIndex == -1 || ( opts[ i ].text != toBox.options[ toBox.selectedIndex ].text ) )       {
            toBox.options.add( new Option( opts[i].text, opts[i].value ) );
            opts.remove( i );
            i--;
          }
        }
      }
    }
    </script>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles