Results 1 to 3 of 3

Thread: Javascript/Dropdown Box Question

  1. #1
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Javascript/Dropdown Box Question

    Hello,

    Let's say a user is presented with the following dropdown box and selects the following item:

    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>

    Is it possible for js to delete the unselected items on some event?
    Last edited by rate; 04-23-2008 at 09:57 AM. Reason: spelling and grammar

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    Check the following code in which there are two select boxes.

    If you select an option form the first one all the other options (unselected ones) will be get removed.

    If you select an option from the second select box then the selected option will be removed.

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	<head>
    		<title> </title>
    		<style type="text/css">
    		
    		</style>
    		<script type="text/javascript">
    		function changedOption(o,n){
    			//n parameter is just to distinguish between operations in the first and second case.
    			if(n == 1){
    				for(var i = o.options.length - 1;i >= 0; i--){
    					if(o.options[i].selected) 
    						continue;
    					else
    						o.remove(i);
    				}
    			}else if(n == 2){
    				for(var i = o.options.length - 1;i >= 0; i--){
    					if(o.options[i].selected) {
    						o.remove(i);break;
    					}						
    				}
    			}
    		}
    		</script>
    	</head>
    	<body>
    		<form name="f1">
    			<h2>Removes all the options except the selected one</h2>
    			<select name="first" id="first" onchange="changedOption(this,1);">
    				<option value="d" selected="selected">Select an option</option>
    				<option value="volvo">Volvo</option>
    				<option value="saab">Saab</option>
    				<option value="fiat">Fiat</option>
    				<option value="audi">Audi</option>
    			</select>
    			<h2>Removes only the selected option</h2>
    			<select name="second" id="second" onchange="changedOption(this,2);">
    				<option value="d" selected="selected">Select an option</option>
    				<option value="volvo">Volvo</option>
    				<option value="saab">Saab</option>
    				<option value="fiat">Fiat</option>
    				<option value="audi">Audi</option>
    			</select>
    		</form>		
    	</body>
    </html>

  3. The Following User Says Thank You to codeexploiter For This Useful Post:

    rate (04-23-2008)

  4. #3
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    It works flawlessly now.

    This is a great forum.

Bookmarks

Posting Permissions

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