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 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

Code:

<!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

Originally Posted by vwphillips

Code:

<!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

Code:

<!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

Thread: Using multiple select lists to show/hide divs

Thread Tools

Search Thread

Using multiple select lists to show/hide divs

Bookmarks

Bookmarks

Posting Permissions