Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

display content depending on dropdown options 2

Status
Not open for further replies.

dkemas

Programmer
Mar 22, 2012
70
GB
I have a page that I'd like to open up different options depending on the answers to two fields, here's the scenario

can you confirm that the info is correct? [Please select|Yes|No]
Do you have the relevant qualifications [Please select|Yes|No]

Yes | Yes - show div1
Yes | No - show div2
No | Yes - show div3
No | No - show div4

How would I achieve this?

Thank you
 
if ... else if .... else conditions.


JavaScript:
if (condition1 && condition2) {
//    do whatever; 
} else if {condition1 && !condition2) {
//    do something else
} else if ......
...
...
...
}

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Hi

First of all, I would think about using relevant [tt]id[/tt] or [tt]class[/tt] ( maybe [tt]data-*[/tt] ) attributes :
Code:
<[b]div[/b] id=[green][i]"YesYes"[/i][/green]>I am div 1</[b]div[/b]>
<[b]div[/b] id=[green][i]"YesNo"[/i][/green]>I am div 2</[b]div[/b]>
<[b]div[/b] id=[green][i]"NoYes"[/i][/green]>I am div 3</[b]div[/b]>
<[b]div[/b] id=[green][i]"NoNo"[/i][/green]>I am div 4</[b]div[/b]>

Then all you need is to compose the given attribute value from the selected [tt]value[/tt]s ( or texts ) :
JavaScript:
[b]var[/b] answer=[[green][i]''[/i][/green],[green][i]''[/i][/green]]

$([green][i]'select'[/i][/green]).change([b]function[/b](e) {
  answer[e.target.name]=e.target.value
  $([green][i]'div'[/i][/green]).hide()
  $([green][i]'div#'[/i][/green]+answer.join([green][i]''[/i][/green])).show()
})

Live demo on jsFiddle :
Of course, if you will never have more than 2 [tt]select[/tt]s x 2 [tt]option[/tt]s, better do it as Chris suggested.

Feherke.
feherke.ga
 
Thanks for the replies, there will only ever be two options. I tried using feherke's solution but receive the error

Object doesn;t support this property or method

on

$('div#'+answer.join('')).show()

We are running IE8 company wide (I know I know) so can;t test on other browsers unfortunately.
 
Hi

dkemas said:
I tried using feherke's solution but receive the error
You mean, you get error on the jsFiddle demo I linked ? Interesting. Should work with Gecko, Presto, WebKit and Trident.

I tried in Explorer 11 and works. Sorry, can not help with version 8. But for 4 choices there is no need for such a generic and extensible solution anyway.


Feherke.
feherke.ga
 
it is difficult to help debug your code if you don't post it. we would need either a link to the page or the source of the rendered page.
 
Yes the error is from jsFiddle, here is the code I grabbed from the view source on the result frame, I added in the latest jquery version as this has been passed for our firewall.

Code:
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Test</title>
  
  <script type='text/javascript' src='[URL unfurl="true"]http://code.jquery.com/jquery-latest.min.js'></script>[/URL]
  
  

  
  <style type='text/css'>
    div {
  display: none;
  border-style: outset;
  padding: 10px;
}
  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var answer=['','']

$('select').change(function(e) {
  answer[e.target.name]=e.target.value
  $('div').hide()
  $('div#'+answer.join('')).show()
})

});//]]>  

</script>


</head>
<body>
  <div id="YesYes">I am div 1</div>
<div id="YesNo">I am div 2</div>
<div id="NoYes">I am div 3</div>
<div id="NoNo">I am div 4</div>

<form action="">
<p>
Can you confirm that the info is correct?
<select name="0"><option>Please select</option><option>Yes</option><option>No</option></select>
</p>
<p>
Do you have the relevant qualifications
<select name="1"><option>Please select</option><option>Yes</option><option>No</option></select>
</p>
</form>





  
</body>


</html>
 
works ok in all the browsers i tested. i changed the code a little to create an initial state.

Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Test</title>
<script type='text/javascript' src='[URL unfurl="true"]http://code.jquery.com/jquery-latest.min.js'></script>[/URL]
<style type='text/css'>
div{display: none;border-style: outset;padding: 10px;}
</style>
<script type='text/javascript'>
$(document).ready(function(){
	var answer=['',''];
	$('select').on('change', function(e) {
  		answer[e.target.name]=e.target.value
  		$('div').hide();
  		$('div#'+answer.join('')).show()
	} );
	$('select').trigger('change');
});
</script>
</head>
<body>
<div id="YesYes">I am div 1</div>
<div id="YesNo">I am div 2</div>
<div id="NoYes">I am div 3</div>
<div id="NoNo">I am div 4</div>
<form action="">
<p>
Can you confirm that the info is correct?
<select name="0">
	<option>Please select</option>
	<option value="Yes">Yes</option>
	<option value="No">No</option>
</select>
</p>
<p>
Do you have the relevant qualifications
<select name="1">
	<option>Please select</option>
	<option value="Yes">Yes</option>
	<option value="No">No</option>
</select>
</p>
</form>
</body>
</html>
 
IE8 produces a warning but it works with the changes which is great, thank you both very much.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top