how to populate a drop list by clicking a value is in in scroll box ?

Discussion in 'JavaScript' started by maaz4, Feb 9, 2011.

  1. #1
    hiii......

    can anyone help me -> how to populate a dropdown list by clicking a value in a scroll box ?.......

    help me please or i will my grade :(
     
    maaz4, Feb 9, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Give this a go :)
    
    <html>
    <head>
    <script type='text/javascript'>
    	function updateOptions() {
    		var box1 = document.getElementById('box1');
    		var box2 = document.getElementById('box2');
    		do { box2.remove(0) } while ( box2.length > 0 );
    		for (var i=0; i<box1.value; i++) {
    			var obj = document.createElement('option');
    			obj.value = i + 1;
    			obj.text = 'Option ' + obj.value;
    			try {
    				box2.add(obj, null);
    			}
    			catch(ex) {
    				box2.add(obj);
    			}
    		}
    	}
    </script>
    <style type='text/css'>
    select { 
    	margin: 5px;
    	width: 100px; 
    }
    </style>
    </head>
    <body>
    <div id='container'>
    	<form>
    	<div><select id='box1' onclick='updateOptions()' size='5'>
    		<option value='1'>Option 1</option>
    		<option value='2'>Option 2</option>
    		<option value='3'>Option 3</option>
    		<option value='4'>Option 4</option>
    		<option value='5'>Option 5</option>
    		<option value='6'>Option 6</option>
    		<option value='7'>Option 7</option>
    		<option value='8'>Option 8</option>
    		<option value='9'>Option 9</option>
    		<option value='10'>Option 10</option>
    	</select></div>
    	<div><select id='box2'>
    		<option value='1'>Option 1</option>
    		<option value='2'>Option 2</option>
    		<option value='3'>Option 3</option>
    		<option value='4'>Option 4</option>
    		<option value='5'>Option 5</option>
    		<option value='6'>Option 6</option>
    		<option value='7'>Option 7</option>
    		<option value='8'>Option 8</option>
    		<option value='9'>Option 9</option>
    		<option value='10'>Option 10</option>
    	</select></div>
    	</form>
    </div>	
    </body>
    </html>
    
    Code (markup):
     
    Cash Nebula, Feb 10, 2011 IP