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
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    convert select to numbered list?

    Hi there,

    Is there any way in JS to convert all items in a Select to a numbered list? I can imagine something like

    Code:
    for (Scount=0;Scount<select.length;Scount++)
    and then process each value in the Select to a numbered list, but I can't figure out how and there seems to be no one on the internet with the same goal...

    Am quite a newbie!

    Thanks in advance for your help!

    Thomas

  • #2
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    I would imagine that few people are trying to do that because it is already an array in the DOM.

    Code:
    <select id="Scount">
     <option value=1>1</option>
     <option value=2>2</option>
     <option value=3>3</option>
    </select>
    
    <script>
      var Ocount = document.getElementById('Scount').getElementsByTagName('option');
      alert(Ocount[0].value);   //
      alert(Ocount[1].value);   // Easy peasy
      alert(Ocount[2].value);   //
    </script>
    But your idea could simplify the array...

    Code:
    <select id="Scount">
     <option value=1>1</option>
     <option value=2>2</option>
     <option value=3>3</option>
    </select>
    
    <script>
      Vcount=[];
      Icount=[];
      var cbs = document.getElementById('Scount').getElementsByTagName('option');
      for(c = 0; c < cbs.length; ++c ){
       Vcount.push(cbs[c].value);
       Icount.push(cbs[c].innerHTML);
       }
    alert(Vcount);
    </script>
    Last edited by blaze4218; 09-26-2011 at 01:29 PM. Reason: typo in Ocount

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    I googled
    javascript numbered list
    and got ordered list for
    first hit


    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="daveyerwin">
    <title>Untitled</title>
    
    <script type="text/javascript">
    function init(){
     	var sel = document.getElementById("sel1");
     	var n = sel.childNodes;
    	var ol = document.createElement("OL");
    	for(var i = 0;i<n.length;i++){
     		if(n[i].nodeType==1){			
    			var ul=document.createElement("UL");
    
    			var li = document.createElement('LI');
    			var tn = document.createTextNode(n[i].value);			
    			li.appendChild(tn);
    			ul.appendChild(li);
    			
    			tn = document.createTextNode(n[i].innerHTML);			
    			var li = document.createElement('LI');
    			li.appendChild(tn);
    			ul.appendChild(li);
    	
    			li = document.createElement('LI');
    			li.appendChild(ul);
    			ol.appendChild(li);	
     		}		
    	}
    	sel.replaceNode(ol);
    }
    </script>
    </head>
    <body onload="init()">
    <p>
    <select id="sel1">
    <option value="zero">None</option>
    <option value="one">single</option>
    </select>
    </p>
    </body>
    </html>
    Last edited by DaveyErwin; 09-26-2011 at 03:07 PM.

  • Users who have thanked DaveyErwin for this post:

    thomas_vdberg (09-26-2011)

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Oh, So your looking to convert the values of a select to and HTML ordered list?? See, I didn't get that from the question...

  • #5
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by thomas_vdberg View Post

    Is there any way in JS to convert all items in a Select to a numbered list?
    Code:
    <form action="#">
    <p>
        <select name='mySelect'>
        <option >Select one</option>
        <option selected value='t'>Tom</option>
        <option value='d'>Dick</option>
        <option value='h'>Harry</option>
        </select><br>
        <input type='button' value='Convert to Ordered List' onclick = 's2ol( mySelect, 1 )'>
    </form>
    
    <script type='text/javascript'>
    
     function s2ol( selBox, offset )
     {
       var theList = document.createElement( 'ol' ),
           listItem;
       
       if( selBox && selBox.options && selBox.parentNode )
       {    
         for( var i = offset || 0; selBox.options[ i ]; i++ )
         {
           listItem = document.createElement( 'li' );
           listItem.appendChild( document.createTextNode( selBox.options[ i ].text ) );
           theList.appendChild( listItem );
         }       
         selBox.parentNode.replaceChild( theList, selBox );  
       }  
     }
     
    </script>

  • The Following 2 Users Say Thank You to Logic Ali For This Useful Post:

    DaveyErwin (09-26-2011), thomas_vdberg (09-26-2011)

  • #6
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Many thanks to everyone! I got a solution on another forum (I simultaneously asked there as well) and Kor (also active on this forum) supplied me with the following code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function addItem(f){
    var sFrom=f['selFrom'];
    var sTo=f['selTo'];
    	if(sFrom.selectedIndex>0){
    	var clone=sFrom.getElementsByTagName('option')[sFrom.selectedIndex].cloneNode(true);
    	sTo.appendChild(clone);
    	}
    }
    function listItem(f){
    var div=document.getElementById('mylist');
    var opt=f['selTo'].options, i=0, o, li;
    	while(div.hasChildNodes()){
    	div.removeChild(div.childNodes[0]);
    	}
    var ol=document.createElement('ol');
    	while(o=opt[i++]){
    	li=document.createElement('li');
    	li.appendChild(document.createTextNode(o.value))
    	ol.appendChild(li);
    	}
    div.appendChild(ol);
    }
    </script>
    </head>
    <body>
    <form action="">
    <select name="selFrom">
    <option value="">-- select an option --</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="blue">blue</option>
    </select>
    
    <input type="button" value="Add Item" onclick="addItem(this.form)">
    
    <select name="selTo">
    </select>
    
    <input type="button" value="List Item" onclick="listItem(this.form)">
    </form>
    <div id="mylist">
    </div>
    </body>
    </html>
    It is similar to some of the answers above and the solution to my problem. Thanks again for all the effort!

    Thomas

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Thank You !
    I always learn something
    from the code you post.


  •  

    Posting Permissions

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