PDA

View Full Version : Using multiple select lists to show/hide divs



alicewiredcanvas
08-09-2010, 02:32 PM
Hello!

I am a bit of a jquery newbie and need a little help! I am working on a website for a small arts festival, it's all hand-coded in PHP. My client would like something like THIS (http://www.larmertreefestival.co.uk/whats-on.html) for their programme page.

Basically, we will have 3 drop-down selection lists (the 3 variables are = 'artform', 'date' and 'location'). By default the programme page will load all of the information, and then using the selection boxes people can narrow it down.

I am quite stumped on how this can be done. Nothing I search for seems to bring it up (probably using the wrong search terms!).

Can anybody point me towards a good tutorial or something online?

Thanks in advance!!

vwphillips
08-09-2010, 04:20 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Select(id1,id2,id3){
var items=zxcByClassName('item');
var s1=document.getElementById(id1),v1=s1.value,r1=new RegExp('\\b'+s1.value+'\\b')
var s2=document.getElementById(id2),v2=s2.value,r2=new RegExp('\\b'+s2.value+'\\b')
var s3=document.getElementById(id3),v3=s3.value,r3=new RegExp('\\b'+s3.value+'\\b')
for (var z0=0;z0<items.length;z0++){
items[z0].style.display=((r1.test(items[z0].className)||v1=='all')&&(r2.test(items[z0].className)||v2=='all')&&(r3.test(items[z0].className)||v3=='all'))?'block':'none';
}
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}


/*]]>*/
</script></head>

<body>

<select id="S1" size="1" onchange="Select('S1','S2','S3');">
<option value="all">All Types</option>
<option value="type1">show type1</option>
<option value="type2">show type2</option>
</select>

<select id="S2" size="1" onchange="Select('S1','S2','S3');">
<option value="all">All Dates</option>
<option value="date1">show date1</option>
<option value="date2">show date2</option>
</select>

<select id="S3" size="1" onchange="Select('S1','S2','S3');">
<option value="all">All Colors</option>
<option value="color1">show color1</option>
<option value="color2">show color2</option>
</select>

<div class="item type1 date1" >
type 1
</div>
<div class="item type2 date2 color1" >
type 2
</div>
<div class="item type1 date2" >
type 1
</div>
</body>

</html>

alicewiredcanvas
08-11-2010, 10:12 AM
Thanks Vic! This seems to work kind of how I imagined... playing around with it now. Perfect, thanks for your help, it's appreciated.

RealIdea
03-20-2012, 11:27 AM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Select(id1,id2,id3){
var items=zxcByClassName('item');
var s1=document.getElementById(id1),v1=s1.value,r1=new RegExp('\\b'+s1.value+'\\b')
var s2=document.getElementById(id2),v2=s2.value,r2=new RegExp('\\b'+s2.value+'\\b')
var s3=document.getElementById(id3),v3=s3.value,r3=new RegExp('\\b'+s3.value+'\\b')
for (var z0=0;z0<items.length;z0++){
items[z0].style.display=((r1.test(items[z0].className)||v1=='all')&&(r2.test(items[z0].className)||v2=='all')&&(r3.test(items[z0].className)||v3=='all'))?'block':'none';
}
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}


/*]]>*/
</script></head>

<body>

<select id="S1" size="1" onchange="Select('S1','S2','S3');">
<option value="all">All Types</option>
<option value="type1">show type1</option>
<option value="type2">show type2</option>
</select>

<select id="S2" size="1" onchange="Select('S1','S2','S3');">
<option value="all">All Dates</option>
<option value="date1">show date1</option>
<option value="date2">show date2</option>
</select>

<select id="S3" size="1" onchange="Select('S1','S2','S3');">
<option value="all">All Colors</option>
<option value="color1">show color1</option>
<option value="color2">show color2</option>
</select>

<div class="item type1 date1" >
type 1
</div>
<div class="item type2 date2 color1" >
type 2
</div>
<div class="item type1 date2" >
type 1
</div>
</body>

</html>

Good Code
i want to know if i can hide every thing on the first load
and show one by one when option is selected ?
the class "all" control this first load
i know this post old but i search google and came to here
so please can you help me ?

vwphillips
03-20-2012, 01:19 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.item {
display:none;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function Select(id1,id2,id3){
var items=zxcByClassName('item');
var s1=document.getElementById(id1),v1=s1.value,r1=new RegExp('\\b'+s1.value+'\\b')
var s2=document.getElementById(id2),v2=s2.value,r2=new RegExp('\\b'+s2.value+'\\b')
var s3=document.getElementById(id3),v3=s3.value,r3=new RegExp('\\b'+s3.value+'\\b')
for (var z0=0;z0<items.length;z0++){
items[z0].style.display=((r1.test(items[z0].className)||v1=='all')&&(r2.test(items[z0].className)||v2=='all')&&(r3.test(items[z0].className)||v3=='all'))?'block':'none';
}
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}


/*]]>*/
</script></head>

<body>

<select id="S1" size="1" onchange="Select('S1','S2','S3');">
<option value="all">All Types</option>
<option value="type1">show type1</option>
<option value="type2">show type2</option>
</select>

<select id="S2" size="1" onchange="Select('S1','S2','S3');">
<option value="all">All Dates</option>
<option value="date1">show date1</option>
<option value="date2">show date2</option>
</select>

<select id="S3" size="1" onchange="Select('S1','S2','S3');">
<option value="all">All Colors</option>
<option value="color1">show color1</option>
<option value="color2">show color2</option>
</select>

<div class="item type1 date1" >
type 1
</div>
<div class="item type2 date2 color1" >
type 2
</div>
<div class="item type1 date2" >
type 1
</div>
</body>

</html>

RealIdea
03-20-2012, 03:08 PM
Thank you so much