display content depending on dropdown options 2

dkemas · Jan 31, 2014

ChrisHirst · Jan 31, 2014

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

feherke · Jan 31, 2014

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 :

http://jsfiddle.net/7Ftna/

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

dkemas · Feb 3, 2014

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.

feherke · Feb 3, 2014

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

jpadie · Feb 3, 2014

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.

dkemas · Feb 3, 2014

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>

jpadie · Feb 4, 2014

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>

dkemas · Feb 5, 2014

IE8 produces a warning but it works with the changes which is great, thank you both very much.

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!

display content depending on dropdown options 2

dkemas

Programmer

ChrisHirst

IS-IT--Management

feherke

Programmer

dkemas

Programmer

feherke

Programmer

jpadie

Technical User

dkemas

Programmer

jpadie

Technical User

dkemas

Programmer

Similar threads

Part and Inventory Search

Sponsor