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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    Convert contents of a drop-down box and store them in a var

    Hello,

    This may seem easy to the experts out there,

    But, how can I go about converting the contents of a drop down (select box) and store them into a comma separated var?

    [DROP DOWN]
    abdcef1
    ghijklm2
    nopqrs3
    tuvwx4
    yz0007

    expected result:

    var x = abdcef1,ghijklm2,nopqrs3,tuvwx4,yz0007

    Much thanks and appreciation for all your help and support.

    Cheers,

    Jay

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    First you'd have to declare a variable for the string (like "thisList"), get the element and find its length, then loop through every option and grab either the value or the text, then append each followed by a comma. Once done, substring(thisList.length-1) to remove the last comma.

    var thisList, elem = document.getElementById("selectID"), elemLen = elem.length;
    for(var i = 0; i < elemLen; i++){
    thisList += document.getElementById("selectID")[i].value + ",";
    }
    thisList = thisList.substring(thisList.length-1);
    alert(thisList);

    Untested.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • Users who have thanked WolfShade for this post:

    jason_kelly (01-24-2013)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    Thanks Wolf,

    I couldn't get it to fire.

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <script type="text/javascript">
    
    function test() {
    
    var elem = document.getElementById('box1').length
    
    	for(var i = 0; i < elem i++){
    		var x = document.getElementById('box1')[i].value + ",";
    	}
    	
    	x = thisList.substring(thisList.length - 1);
    		alert(x);
    }
    
    </script>
    
    
    
    </head>
    
    <body>
    <select id="box1">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select> 
    
    <input type="submit" value="Submit" onclick="test()">
    
    </body>
    
    </html>

  • #4
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    You're missing some code. And some makes no sense. You don't declare "thisList" anywhere, nor append anything to it, but then you try to get a substring of it.

    Code:
    function test() {  
      var thisList, elem = document.getElementById('box1'), elemLen = elem.length;
      for(var i = 0; i < elemLen; i++){
             thisList += document.getElementById('box1')[i].value + ",";
         }
             var x = thisList.substring(thisList.length - 1);
             alert(x); 
    }
    thisList is the string to contain the list.
    elem is short for element, the source.
    elemLen is element length.
    Last edited by WolfShade; 01-24-2013 at 08:59 PM.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • Users who have thanked WolfShade for this post:

    jason_kelly (01-24-2013)

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    Thanks Wolf.

    I tried your revised code, no errors, but an alert box with just a comma appears.

    Any idea?

    Jay

  • #6
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I'm playing around with it. Hang on.

    UPDATE: Okay, this will alert ONLY what options are selected, not the whole thing (unless all are selected.)

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <script type="text/javascript">
    
    function test() {  
      var thisList = "", elem = document.forms["thisTest"].box1, elemLen = elem.length;
      for(var i = 0; i < elemLen; i++){
             if(elem.options[i].selected){ thisList += elem.options[i].value + ","; }
         }
             var x = thisList.substring(0,thisList.length - 1);
             alert(x); 
    }
    
    </script>
    
    
    
    </head>
    
    <body>
    <form name="thisTest" id="thisTest">
    <select id="box1" name="box1" multiple="multiple">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select> 
    
    <input type="button" value="Submit" onclick="test()">
    </form>
    </body>
    
    </html>
    Copy/paste all the code, as I made changes to the HTML, too.
    Last edited by WolfShade; 01-24-2013 at 09:27 PM.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    My understanding is that he wishes to place all the select options in a comma delimited string variable, not just the selected ones. (Why???)


    Code:
    <select id = "mysel">
    <option value = "abcdef1">abcdef1</option>
    <option value = "ghijklm2">ghijkl2</option>
    <option value = "nopqrs3">nopqrs3</option>
    <option value ="tuvwx4">tuvwx4</option>
    <option value ="yz0007">yz007</option>
    </select>
    
    <script type = "text/javascript">
    var x = "";
    for (var i =0; i<document.getElementById("mysel").length; i++) {
    x += document.getElementById("mysel").options[i].value + ",";
    }
    x = x.replace(/,$/,"");
    alert (x);
    
    </script>
    The Egyptians were all drowned in the dessert. Afterwards Moses went up to Mount Cyanide to get the ten commandments.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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