www.webdeveloper.com
Results 1 to 2 of 2

Thread: Action in <select> tag with Javascript

Hybrid View

  1. #1
    Join Date
    May 2013
    Posts
    1

    Action in <select> tag with Javascript

    Hi guys,

    I'm new in Javascript, and have the following code:

    HTML Code:
    <script type="text/javascript">
    		function changeFunc() {
    			var selectBox = document.getElementById("selectBox");
    			var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    			if (selectedValue == "Configuration1")
    				document.getElementById("demo").innerHTML = "Hello World";
    			if (selectedValue == "Configuration2")
    				document.getElementById("demo2").innerHTML = "demo 2";
    		}
    	</script>
    
    	<p align="center">
    		<select id="selectBox" name="ConfigurationList" onclick="changeFunc();">
    			<option value="Configuration1">CPU - 1GHz / RAM 1GB / HDD 50GB</option>
    			<option value="Configuration2">CPU - 1.44GHz / RAM 1GB / HDD 50GB</option>
    		</select>
    	</p>
    	
    	<p id="demo"></p>
    	<p id="demo2"></p>
    When submit code, I choose Configuration1, it show Hello World, then I choose Configuration2, it show both Hello World and demo 2.
    So, how can I do to show only one everytime after clicked?
    Thanks in advance.
    nganndt

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,644
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <script type="text/javascript">
    		function changeFunc() {
    			var selectBox = document.getElementById("selectBox");
    			var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    				document.getElementById("demo").innerHTML = selectedValue == "Configuration1"?"Hello World":'';
    				document.getElementById("demo2").innerHTML = selectedValue == "Configuration2"?"demo 2":'';
    		}
    	</script>
    
    	<p align="center">
    		<select id="selectBox" name="ConfigurationList" onchange="changeFunc();">
    			<option value="Configuration1">CPU - 1GHz / RAM 1GB / HDD 50GB</option>
    			<option value="Configuration2">CPU - 1.44GHz / RAM 1GB / HDD 50GB</option>
    		</select>
    	</p>
    
    	<p id="demo"></p>
    	<p id="demo2"></p>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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