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

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0

    Store contents of drop down box into var, then load the new dropdown box from var


    Hello,

    I need the help of an expert here on this forum.

    1.) How can I use javascript to save the contents of box1 and store it into a variable (x), separating them all by commas? Since I will be doing some database work in the backend, it is important that the values are stored using this method.

    Example of whats in the drop down box:
    [BOX1]
    volvo
    saab
    mercedes
    audi

    Resulting var:
    var x = volvo,saab,mercedes,audi

    2.) Using the variable (x), how can I repopulate the drop down [BOX2] with the comma separated values?

    Example of what Box 2 should look like:

    [BOX2]
    volvo
    saab
    mercedes
    audi

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    </head>
    
    <body>
    
    <select id="box1" style="width: 100px;">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <br>
    <input type="button" value="Save" name="Save">
    
    <br><br>
    
    <input type="button" value="Populate" name="Populate"><br>
    
    <select id="box2" style="width: 100px;" name="D1"></select>
    
    <br>
    
    </body>
    
    </html>
    Much thanks and appreciation for all your help and support.

    Cheers,

    Jay
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,040
    Rep Power
    119
    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <script>
    var storage = new Array();
    var i = -1;
    function doStorePop()
    {
    document.getElementById("Save").onclick = function() {
    var cars = document.getElementById("box1").value;
    storage.push(cars);
    }
    document.getElementById("Pop").onclick = function() {
    i++;
    var opt = document.createElement("option");
    opt.value = storage[i];
    document.getElementById("box2").style.textTransform="capitalize";
    opt.innerHTML = storage[i];
    document.getElementById("box2").appendChild(opt);
    }
    }
    window.onload = function() {
    doStorePop();
    }
    </script>
    
    </head>
    
    <body>
    
    <select id="box1" style="width: 100px;">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <br>
    <input id="Save" type="button" value="Save" name="Save">
    
    <br><br>
    
    <input id="Pop" type="button" value="Populate" name="Populate"><br>
    
    <select id="box2" style="width: 100px;" name="D1"></select>
    
    <br>
    
    </body>
    
    </html>
    Or... you may be looking for something like this:

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <script>
    var storage = new Array();
    function doStorePop()
    {
    document.getElementById("Save").onclick = function() {
    var cars = document.getElementById("box1").value;
    storage.push(cars);
    }
    document.getElementById("Pop").onclick = function() {
    document.getElementById("box2").innerHTML="";
    document.getElementById("box2").style.textTransform="capitalize";
    for (i=0;i<=storage.length-1;i++) {
    var opt = document.createElement("option");
    opt.value = storage[i];
    opt.innerHTML = storage[i];
    document.getElementById("box2").appendChild(opt);
    }
    storage = [];
    }
    }
    window.onload = function() {
    doStorePop();
    }
    </script>
    
    </head>
    
    <body>
    
    <select id="box1" style="width: 100px;">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <br>
    <input id="Save" type="button" value="Save" name="Save">
    
    <br><br>
    
    <input id="Pop" type="button" value="Populate" name="Populate"><br>
    
    <select id="box2" style="width: 100px;" name="D1"></select>
    
    <br>
    
    </body>
    
    </html>
    Last edited by web_loone08; January 24th, 2013 at 02:39 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0
    Thanks very much Loone,

    Close and almost there.

    I tried both instances of your code, it did work, but only the first value showed up in the second box. The rest of the select box items did not appear.

    I am forceably using IE7 if that helps.

    Cheers,

    Jay
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,040
    Rep Power
    119
    Just tested in IE, do not see anything wrong with the code. The code that I provided you; will only insert the values (of the options, that you selected from the first select menu), into the second select menu.

    Edit: Oh... I see what you want... you want an exact replicate of the first select menu; in the second select menu... is that correct? If that is what your wanting; then do this:

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <script>
    var storage;
    function doStorePop()
    {
    document.getElementById("Save").onclick = function() {
    var cars = document.getElementById("box1").innerHTML;
    storage = cars;
    }
    document.getElementById("Pop").onclick = function() {
    document.getElementById("box2").innerHTML = storage;
    }
    }
    window.onload = function() {
    doStorePop();
    }
    </script>
    
    </head>
    
    <body>
    
    <select id="box1" style="width: 100px;">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <br>
    <input id="Save" type="button" value="Save" name="Save">
    
    <br><br>
    
    <input id="Pop" type="button" value="Populate" name="Populate"><br>
    
    <select id="box2" style="width: 100px;" name="D1"></select>
    
    <br>
    
    </body>
    
    </html>
    Last edited by web_loone08; January 24th, 2013 at 03:45 PM.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0
    Thanks Loon,

    Correct, I wish to mimic and duplicate the contents of the box.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    27
    Rep Power
    0
    Hi Loon,

    I tried your revised code, but now it just leaves the box2 empty.


    Originally Posted by web_loone08
    Just tested in IE, do not see anything wrong with the code. The code that I provided you; will only insert the values (of the options, that you selected from the first select menu), into the second select menu.

    Edit: Oh... I see what you want... you want an exact replicate of the first select menu; in the second select menu... is that correct? If that is what your wanting; then do this:

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <script>
    var storage;
    function doStorePop()
    {
    document.getElementById("Save").onclick = function() {
    var cars = document.getElementById("box1").innerHTML;
    storage = cars;
    }
    document.getElementById("Pop").onclick = function() {
    document.getElementById("box2").innerHTML = storage;
    }
    }
    window.onload = function() {
    doStorePop();
    }
    </script>
    
    </head>
    
    <body>
    
    <select id="box1" style="width: 100px;">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <br>
    <input id="Save" type="button" value="Save" name="Save">
    
    <br><br>
    
    <input id="Pop" type="button" value="Populate" name="Populate"><br>
    
    <select id="box2" style="width: 100px;" name="D1"></select>
    
    <br>
    
    </body>
    
    </html>
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,040
    Rep Power
    119
    My fault; I forgot that IE would not let you do that. This should work in IE and all other browsers:

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <script>
    var storage = new Array();
    function doStorePop()
    {
    document.getElementById("Save").onclick = function() {
    var opts = document.getElementById("box1").getElementsByTagName("option");
    for (i=0;i<=opts.length-1;i++) {
    storage.push(opts[i].value);
    }
    this.disabled="true";
    }
    document.getElementById("Pop").onclick = function() {
    document.getElementById("box2").innerHTML="";
    for (ii=0;ii<=storage.length-1;ii++) {
    var new_opts = document.createElement("option");
    document.getElementById("box2").style.textTransform="capitalize";
    new_opts.value = storage[ii];
    new_opts.innerHTML = storage[ii];
    document.getElementById("box2").appendChild(new_opts);
    }
    storage = [];
    }
    }
    window.onload = function() {
    doStorePop();
    }
    </script>
    
    </head>
    
    <body>
    
    <select id="box1" style="width: 100px;">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <br>
    <input id="Save" type="button" value="Save" name="Save">
    
    <br><br>
    
    <input id="Pop" type="button" value="Populate" name="Populate"><br>
    
    <select id="box2" style="width: 100px;" name="D1"></select>
    
    <br>
    
    </body>
    
    </html>
    Also..., I disabled the "Save" button once it's clicked; otherwise IE will insert duplicate options. The only way around that would be to validate the option values from the first select menu, with indexOf, against the storage array key(s); before you populate the second select menu or you could just totally get rid of the second select menu and/or option elements, by removing it from the DOM with removeChild and rebuild it again, from scratch.

    Different Approach (Besides Disabling Button)

    This should do the trick; with fixing the inserting duplicate options, in IE... without disabling the "Save" button.

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <script>
    var maxOpts, maxStore;
    var storage = new Array();
    function doStorePop()
    {
    document.getElementById("Save").onclick = function() {
    var opts = document.getElementById("box1").getElementsByTagName("option");
    var maxOpts = opts.length - 1;
    var maxStore = storage.length - 1;
    for (i=0;i<=opts.length-1;i++) {
    if (maxStore < maxOpts) {
    storage.push(opts[i].value);
    }
    }
    }
    document.getElementById("Pop").onclick = function() {
    document.getElementById("box2").innerHTML="";
    for (ii=0;ii<=storage.length-1;ii++) {
    var new_opts = document.createElement("option");
    document.getElementById("box2").style.textTransform="capitalize";
    new_opts.value = storage[ii];
    new_opts.innerHTML = storage[ii];
    document.getElementById("box2").appendChild(new_opts);
    }
    storage = [];
    }
    }
    window.onload = function() {
    doStorePop();
    }
    </script>
    
    </head>
    
    <body>
    
    <select id="box1" style="width: 100px;">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <br>
    <input id="Save" type="button" value="Save" name="Save">
    
    <br><br>
    
    <input id="Pop" type="button" value="Populate" name="Populate"><br>
    
    <select id="box2" style="width: 100px;" name="D1"></select>
    
    <br>
    
    </body>
    
    </html>
    Last edited by web_loone08; January 24th, 2013 at 08:58 PM.

IMN logo majestic logo threadwatch logo seochat tools logo