...

View Full Version : convert select to numbered list?



thomas_vdberg
09-26-2011, 10:13 AM
Hi there,

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


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

blaze4218
09-26-2011, 12:24 PM
I would imagine that few people are trying to do that because it is already an array in the DOM.



<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...



<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>

DaveyErwin
09-26-2011, 02:01 PM
I googled
javascript numbered list
and got ordered list for
first hit






<!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>

blaze4218
09-26-2011, 02:32 PM
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...

Logic Ali
09-26-2011, 02:32 PM
Is there any way in JS to convert all items in a Select to a numbered list?
<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>

thomas_vdberg
09-26-2011, 02:54 PM
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:


<!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!:thumbsup:

Thomas

DaveyErwin
09-26-2011, 04:04 PM
Thank You !
I always learn something
from the code you post.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum