www.webdeveloper.com
Results 1 to 7 of 7

Thread: creating dropdown box which will change content

  1. #1
    Join Date
    Jun 2013
    Posts
    33

    creating dropdown box which will change content

    i want a dropdown box for my blog in which if you select different options different tables are displayed. is it possible through javascript? pls help ....thanks

  2. #2
    Join Date
    Feb 2012
    Location
    Tallahassee, FL
    Posts
    280
    Sure, this solution uses jQuery:

    Try it here: http://script-x.net/dropchange.php
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$("#myDropdown").change(function(){
    		target = $(this).val();
    		$(".tables").hide();
    		if(target != 'none'){
    			$("#" + target).show();
    		}
    		
    		return false;
    	});
    	
    });
    </script>
    <style type="text/css">
    	table{
    		width:100%;
    		display:none;
    	}
    	#content{
    		width:100%;
    	}
    </style>
    </head>
    <body>
    
    <select id="myDropdown">
    	<option value="none">--SELECT TABLE--</option>
    	<option value="t1">Show Table 1</option>
    	<option value="t2">Show Table 2</option>
    	<option value="t3">Show Table 3</option>
    </select>
    <div id="content">
    	<table id="t1" class="tables">
    		<tr><td>I am Table 1</td></tr>
    	</table>
    	<table id="t2" class="tables">
    		<tr><td>I am Table 2</td></tr>
    	</table>
    	<table id="t3" class="tables">
    		<tr><td>I am Table 3</td></tr>
    	</table>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,355
    Another solution without jQuery:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Table Selections </title>
    <meta charset="utf-8">
    <style type="text/css">
     #tblWrapper div { display:none; }
    </style>
    
    </head>
    <body>
    <div id="tblWrapper">
    
     <select id="tblDisplay" onchange="changeTblDisplay(this.value)">
      <option value="">Choose Table </option>
      <option value="tbl1"> Table 1 </option>
      <option value="tbl2"> Table 2 </option>
      <option value="tbl3"> Table 3 </option>
     </select>
    
     <div id="tbl1" width="50%">
     <table border="1" width="100%">
     <thead> <caption> Table 1 </caption> </thead>
     <tbody>
      <tr>  <td> 1 </td>  <td> 2 </td> </tr>
      <tr>  <td> 3 </td>  <td> 4 </td> </tr>
     </tbody>
     </table>
     </div>
    
     <div id="tbl2" width="50%">
     <table border="1" width="100%">
     <thead> <caption> Table 2 </caption> </thead>
     <tbody>
      <tr>  <td> A </td>  <td> B </td> </tr>
      <tr>  <td> C </td>  <td> D </td> </tr>
     </tbody>
     </table>
     </div>
    
     <div id="tbl3" width="50%">
     <table border="1" width="100%">
     <thead> <caption> Table 3 </caption> </thead>
     <tbody>
      <tr>  <td> a </td>  <td> c </td> </tr>
      <tr>  <td> b </td>  <td> d </td> </tr>
     </tbody>
     </table>
     </div>
    
    </div>
    
    <script type="text/javascript">
    function changeTblDisplay(IDS) { 
      if (IDS == '') { return; }
      var sel = document.getElementById('tblWrapper').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
      document.getElementById(IDS).style.display = 'block';  
    }
    </script>
    
    </body>
    </html>

  4. #4
    Join Date
    Jun 2013
    Posts
    33
    Thanks, NoEffinWay and JMRKER, this is exactly i was looking for. But what if i want tabs instead of dropdown box? and without jquery.
    thanks.

  5. #5
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    You can use regular javascript.

    This example uses an image and description, but any HTML can be displayed including a table or whatever.

    http://dropdowncombobox.com/drop-dow...h-description/

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,355

    Question

    Quote Originally Posted by dhirajkumar.41 View Post
    Thanks, NoEffinWay and JMRKER, this is exactly i was looking for. But what if i want tabs instead of dropdown box? and without jquery.
    thanks.
    I think what you want is fairly easy to change from a dropdown to a tab display.
    However, to be certain I'm not wasting my time, please define what you think is a tab display.

    Horizontal or Vertical tabs?
    How big/small?
    What are the labels associated with the tabs? Table 1, Table 2, etc?
    Are there any other elements to be displayed after a tab has been selected or is it just the table displays initially posted about?

  7. #7
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096

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