show/hide divs using select

elem

09-13-2011, 07:35 PM

Hi guys,

another day, another problem ;) I have a select:

<label for="tiers">Number of tiers</label>
<select name="tiers" id="tiers" onchange="showtiers()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

So depending what the user will choose, I want to show below divs:

<div class="tier" id="tier_1" style="display:block">
<label for="tier1">Tier 1</label>
<select name="item" id="tier1" onchange="recalculate(this)">
<option value="0">Please choose1</option>
</select>
</div>

<div class="tier" id="tier_2" style="display:none">
<label for="tier2">Tier 2</label>
<select name="item" id="tier2" onchange="recalculate(this)">
<option value="0">Please choose2</option>
</select>
</div>

<div class="tier" id="tier_3" style="display:none">
<label for="tier3">Tier 3</label>
<select name="item" id="tier3" onchange="recalculate(this)">
<option value="0">Please choose3</option>
</select>
</div>

<div class="tier" id="tier_4" style="display:none">
<label for="tier4">Tier 4</label>
<select name="item" id="tier4" onchange="recalculate(this)">
<option value="0">Please choose4</option>
</select>
</div>

As you can see, on page load you can only see select/div nr 1, three others are hidden. How can I make that happen? I'm trying with below code placed in the head:

function showtiers() {
var dropdownIndex = document.getElementById('tiers').selectedIndex;
var dropdownValue = document.getElementById('tiers')[dropdownIndex].value;

if (dropdownValue == 2) {

document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'none';
document.getElementById(tier_4).style.display = 'none';

}

if (dropdownValue == 3) {

document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'block';
document.getElementById(tier_4).style.display = 'none';

}

if (dropdownValue == 4) {

document.getElementById(tier_2).style.display = 'block';
document.getElementById(tier_3).style.display = 'block';
document.getElementById(tier_4).style.display = 'block';

}
}

If someone could point out what am I doing wrong I'd really appreciate it.

xelawho

09-13-2011, 07:57 PM

everything like this:
document.getElementById(tier_2)

needs to be like this:
document.getElementById('tier_2')

you can also simplify the start by changing your onchange to:
<select name="tiers" id="tiers" onchange="showtiers(value)">

and the start of your function to:
function showtiers(value) {
var dropdownValue = value;

DaveyErwin

09-13-2011, 08:01 PM

Just a quick "off the cuff".
Ask more questions.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>

<script type="text/javascript">
function showtiers(el) {
if(el.selectedIndex)
document.getElementById("tier_"+el.selectedIndex).style.display = "block";
}
</script>
<style type="text/css">
div{display:none;}
</style>
</head>
<body>
<form action="" onsubmit="return false;"><p>
<label for="tiers">Number of tiers</label>
<select name="tiers" id="tiers" onchange="showtiers(this)">
<option value="0">none</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div class="tier" id="tier_1">
<label for="tier1">Tier 1</label>
<select name="item" id="tier1" onchange="recalculate(this)">
<option value="0">Please choose1</option>
</select>
</div>

<div class="tier" id="tier_2">
<label for="tier2">Tier 2</label>
<select name="item" id="tier2" onchange="recalculate(this)">
<option value="0">Please choose2</option>
</select>
</div>

<div class="tier" id="tier_3">
<label for="tier3">Tier 3</label>
<select name="item" id="tier3" onchange="recalculate(this)">
<option value="0">Please choose3</option>
</select>
</div>

<div class="tier" id="tier_4">
<label for="tier4">Tier 4</label>
<select name="item" id="tier4" onchange="recalculate(this)">
<option value="0">Please choose4</option>
</select>
<p></div>
</form>
</body>
</html>

elem

09-15-2011, 02:10 PM

thank you xelawho! that fixed the problem, all working now.

Davey: your code doesn't work too good ... and what do you mean by saying "ask more questions" ? English is not my first language so I don't know what you meant by off the cuff either but i can feel the sarcasm in your reply

DaveyErwin

09-15-2011, 03:38 PM

Davey: your code doesn't work too good ... and what do you mean by saying "ask more questions" ? English is not my first language so I don't know what you meant by off the cuff either but i can feel the sarcasm in your reply

Sorry,You are right the code is not good.
Please forgive the apparent sarcasm,
really none was intended. Here is some
better code ....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="daveyerwin">
<title>Untitled</title>

<script type="text/javascript">
showtiers = function (el) {
for(var i = 2;i<5;i++){
document.getElementById("tier_"+i).style.display = "none"
}
var a = el.options[el.selectedIndex].value;
while(a > 1){
document.getElementById("tier_"+a).style.display = "block";
a--;
}
}
</script>
<style type="text/css">
.tier{display:none;}
</style>
</head>
<body>
<form action="" onsubmit="return false;"><p>
<label for="idtiers">Number of tiers</label>
<select name="tiers" id="idtiers" onchange="showtiers(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div class="tier" id="tier_1" style="display:block">
<label for="tier1">Tier 1</label>
<select name="item" id="tier1" onchange="recalculate(this)">
<option value="0">Please choose1</option>
</select>
</div>

<div class="tier" id="tier_2">
<label for="tier2">Tier 2</label>
<select name="item" id="tier2" onchange="recalculate(this)">
<option value="0">Please choose2</option>
</select>
</div>

<div class="tier" id="tier_3">
<label for="tier3">Tier 3</label>
<select name="item" id="tier3" onchange="recalculate(this)">
<option value="0">Please choose3</option>
</select>
</div>

<div class="tier" id="tier_4">
<label for="tier4">Tier 4</label>
<select name="item" id="tier4" onchange="recalculate(this)">
<option value="0">Please choose4</option>
</select>
<p></div>
</form>
</body>
</html>

I changed this part of your code ...

<label for="tiers">Number of tiers</label>
<select name="tiers" id="tiers" onchange="showtiers()">

because id must be unique.

Again I apologize, and have a most pleasant day.

elem

09-15-2011, 08:21 PM

thanks Davey, really appreciate it