www.webdeveloper.com
Results 1 to 4 of 4

Thread: <select> and Javascript

  1. #1
    Join Date
    Feb 2014
    Posts
    11

    <select> and Javascript

    Hey everyone! I've been learning some javascript for the past days, and I need some help on something. Basicaly, I've one select tag with its respective options in my html document, and what I want to do is that depending on what option I chose I need a second select tag to display certain values that are different in each of the options.

    As an example of the HTML code:

    Code:
    <select name="Elements">
    <option value="0">(Select an element)</option>
    <option value="1">Hydrogen</option> 
    <option value="2">Boron</option>
    </select>
    
    <select name="Hydrogen">
    <option value="0">1</option>
    </select>
    
    <select name="Boron">
    <option value="0">1</option>
    <option value="1">3</option>
    </select>
    So if I picked Hydrogen on the first one, I'd like to see the values of the second, and If I picked Boron I'd like to see the values of the third one. If you guys could give a hand with this it'd be awesome! And sorry if I wasn't precise enough or if I missed anything, I'm new to this!

  2. #2
    Join Date
    Oct 2013
    Posts
    514
    Try this:

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Elements</title>
    <script>
    function elements(el,h,b){
    	switch(el.value){
    		case '1':
    			h.style.display='block';
    			b.style.display='none';
    			break;
    		case '2':
    			h.style.display='none';
    			b.style.display='block';
    			break;
    		default:
    			h.style.display='none';
    			b.style.display='none';
    			break;
    	}
    }
    </script>
    </head>
    <body>
    
    <select onchange="elements(this,H,B)" name="Elements">
    <option value="0">(Select an element)</option>
    <option value="1">Hydrogen</option> 
    <option value="2">Boron</option>
    </select>
    
    <select id="H" style="display:none;" name="Hydrogen">
    <option value="0">1</option>
    </select>
    
    <select id="B" style="display:none;" name="Boron">
    <option value="0">1</option>
    <option value="1">3</option>
    </select>
    
    </body>
    </html>
    Last edited by Kevin2; 02-25-2014 at 03:49 PM. Reason: didn't need "case '0'" and added <title>

  3. #3
    Join Date
    Feb 2014
    Posts
    11
    Thank you very much! Exactly what I needed!!

  4. #4
    Join Date
    Oct 2013
    Posts
    514
    You're very welcome!

    A word of warning though. That code, both HTML and JavaScript, is not very extensible. After a half-dozen or so elements it will get very unwieldy very quickly.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles