Solved

JavaScript - show hide divs from select list

Posted on 2011-09-07
3
213 Views
Last Modified: 2012-05-12
Hi,
I can't work out what I am doing wrong here, also is there a better/shorter way of showing or hiding divs using jquery?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="application/javascript">

function show_payment_option(which_option){ 

	alert(which_option);
	
	
		if (which_option == 'credit_paypal'){
		   document.getElementById('paypal_option_details').style.display = 'block'; 
		   document.getElementById('cheque_option_details').style.display = 'none'; 
		   document.getElementById('direct_option_details').style.display = 'none';
		   document.getElementById('eway_option_details').style.display = 'none';
		   document.getElementById('pay_on_pickup_option_details').style.display = 'none'; 
		   document.getElementById('get_quote_option_details').style.display = 'none';		
		}else if (which_option == 'credit_eway'){
		   document.getElementById('paypal_option_details').style.display = 'none'; 
		   document.getElementById('cheque_option_details').style.display = 'none'; 
		   document.getElementById('direct_option_details').style.display = 'none'; 
		   document.getElementById('eway_option_details').style.display = 'block';
		   document.getElementById('pay_on_pickup_option_details').style.display = 'none'; 
		   document.getElementById('get_quote_option_details').style.display = 'none';		   
		}else if (which_option == 'cheque'){
		   document.getElementById('paypal_option_details').style.display = 'none'; 
		   document.getElementById('cheque_option_details').style.display = 'block'; 
		   document.getElementById('direct_option_details').style.display = 'none'; 
		   document.getElementById('eway_option_details').style.display = 'none'; 
		   document.getElementById('pay_on_pickup_option_details').style.display = 'none'; 
		   document.getElementById('get_quote_option_details').style.display = 'none';		
		}else if (which_option == 'direct'){
		   document.getElementById('paypal_option_details').style.display = 'none'; 
		   document.getElementById('cheque_option_details').style.display = 'none'; 
		   document.getElementById('direct_option_details').style.display = 'block'; 
		   document.getElementById('eway_option_details').style.display = 'none'; 
		   document.getElementById('pay_on_pickup_option_details').style.display = 'none'; 
		   document.getElementById('get_quote_option_details').style.display = 'none';		
		}else if (which_option == 'pay_on_pickup'){
		   document.getElementById('paypal_option_details').style.display = 'none'; 
		   document.getElementById('cheque_option_details').style.display = 'none'; 
		   document.getElementById('direct_option_details').style.display = 'none'; 
		   document.getElementById('eway_option_details').style.display = 'none'; 
		   document.getElementById('pay_on_pickup_option_details').style.display = 'block'; 
		   document.getElementById('get_quote_option_details').style.display = 'none';		
		}else if (which_option == 'pay_on_pickup'){
		   document.getElementById('paypal_option_details').style.display = 'none'; 
		   document.getElementById('cheque_option_details').style.display = 'none'; 
		   document.getElementById('direct_option_details').style.display = 'none'; 
		   document.getElementById('eway_option_details').style.display = 'none'; 
		   document.getElementById('pay_on_pickup_option_details').style.display = 'none'; 
		   document.getElementById('pay_on_pickup_option_details').style.display = 'block';		
		}else {
		   document.getElementById('paypal_option_details').style.display = 'none'; 
		   document.getElementById('cheque_option_details').style.display = 'none'; 
		   document.getElementById('direct_option_details').style.display = 'none'; 
		   document.getElementById('eway_option_details').style.display = 'none'; 
		   document.getElementById('pay_on_pickup_option_details').style.display = 'none'; 
		   document.getElementById('get_quote_option_details').style.display = 'none';		
		}

}

</script>




</head>

<body>




<select name="order_details[payment_option]" id="payment_option" onChange="show_payment_option(payment_option.value)">
<option value = "">Select Payment Option</option>
<option value="credit_paypal">Credit Card payment via PayPal.</option>
<option value="credit_eway">Credit Card - Master Card or Visa.</option>
<option value="cheque" >Cheque - must clear before goods dispatched</option>
<option value="direct" >Direct Deposit into our Bank Account </option>
<option value="get_quote">Make Enquiry/Get Quote</option>
<option value="pay_on_pickup" >Pay On Pickup</option>
</select>


<div id="paypal_option_details">Pay Pay Options Details</div>
<div id="cheque_option_details">Cheque Options Details</div>
<div id="direct_option_details">Direct Deposit Details</div>
<div id="eway_option_details">Pay Pay Options Details</div>
<div id="pay_on_pickup_option_details">Cheque Options Details</div>
<div id="get_quote_option_details">Direct Deposit Details</div>


</body>
</html>

Open in new window

0
Comment
Question by:sabecs
3 Comments
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36500656
Very simple. Look at below code. You can test below code at

http://jsfiddle.net/E2qS6/1/
<!DOCTYPE html>
<html>
<head>
<title>Kiran Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $('#payment_option').change(function(){
  show_payment_option();
  });
  hide_divs();
});

function show_payment_option(){ 

   var which_option = $('#payment_option').val();
   hide_divs();
    
    switch (which_option) {
      case "credit_paypal":
        $('#paypal_option_details').show();
        break;
      case "credit_eway":
        $('#eway_option_details').show();
        break;
      case "cheque":
        $('#cheque_option_details').show();
        break;
      case "direct":
        $('#direct_option_details').show();
        break;
      case "credit_paypal":
        $('#paypal_option_details').show();
        break;
      case "pay_on_pickup":
        $('#pay_on_pickup_option_details').show();
        break;
    }

}

function hide_divs()
{
  $('#paypal_option_details').hide();
 $('#cheque_option_details').hide();
 $('#direct_option_details').hide();
 $('#eway_option_details').hide();
 $('#pay_on_pickup_option_details').hide();
 $('#get_quote_option_details').hide();
}

</script>
</head>
<body>
  <form>
  <select name="order_details[payment_option]" id="payment_option">
<option value = "">Select Payment Option</option>
<option value="credit_paypal">Credit Card payment via PayPal.</option>
<option value="credit_eway">Credit Card - Master Card or Visa.</option>
<option value="cheque" >Cheque - must clear before goods dispatched</option>
<option value="direct" >Direct Deposit into our Bank Account </option>
<option value="get_quote">Make Enquiry/Get Quote</option>
<option value="pay_on_pickup" >Pay On Pickup</option>
</select>


<div id="paypal_option_details">Pay Pay Options Details</div>
<div id="cheque_option_details">Cheque Options Details</div>
<div id="direct_option_details">Direct Deposit Details</div>
<div id="eway_option_details">Pay Pay Options Details</div>
<div id="pay_on_pickup_option_details">Cheque Options Details</div>
<div id="get_quote_option_details">Direct Deposit Details</div>
</form>
</body>
</html>

Open in new window

0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 36500662
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
	$('.preview').hide();
	$('#payment_option').bind('change',function(){
		$('.preview').hide();
		$('#'+this.value).show();
	});	
});
</script>


</head>

<body>




<select name="order_details[payment_option]" id="payment_option">
<option value = "">Select Payment Option</option>
<option value="credit_paypal">Credit Card payment via PayPal.</option>
<option value="credit_eway">Credit Card - Master Card or Visa.</option>
<option value="cheque" >Cheque - must clear before goods dispatched</option>
<option value="direct" >Direct Deposit into our Bank Account </option>
<option value="get_quote">Make Enquiry/Get Quote</option>
<option value="pay_on_pickup" >Pay On Pickup</option>
</select>


<div class="preview" id="credit_paypal">Paypal Options Details</div>
<div class="preview" id="credit_eway">Pay E-Way Options Details</div>
<div class="preview" id="cheque">Cheque Options Details</div>
<div class="preview" id="direct">Direct Deposit Details</div>
<div class="preview" id="get_quote">Get Quote</div>
<div class="preview" id="pay_on_pickup">Pay on Pickup Options Details</div>


</body>
</html>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:sabecs
ID: 36500774
Thanks hielo, that fantastic.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question