I'd like to figure out how to (if there is a way) to have 3 dependent dropdown boxes with a submit button that could filter my blog by label. It's for athletes who want to be recruited.
I'd like for coaches to be able to select a sport, then select a position and/or graduating class. I use blogger, so there's already LABELS in place. I figured out that I could add labels to the end of this string: http://www.recruitcolorado.blogspot.com/search/label/ then just put a + sign in between other chosen labels. But how would I incorporate that into the dropdown boxes I described above to produce one of the following?
http://www.recruitcolorado.blogspot.com/search/label/Baseball
http://www.recruitcolorado.blogspot.com/search/label/Baseball+Football
http://www.recruitcolorado.blogspot.com/search/label/Baseball+2013+Pitcher
Very little is setup on the site, so if you need more info I can provide that. Here's what I envision the dropdown menu to look like... but with one more dropdown box for grad year... and grayed out if they've yet to choose the sport... and something that actually works :-)
PS Let me know if it's impossible, or if I need php. I don't know anything about php and blogger doesn't accept any either. Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>select change 2nd select</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var varieties=[
["- Select a Position -"],
["- Select a Position -","Guard","Forward","Center"],
["- Select a Position -","Quarterback","Running Back","Defensive End"],
["- Select a Position -","Pitcher","Catcher","Outfield"]
];
function Box2(idx) {
var f=document.myform;
f.box2.options.length=null;
for(var i=0; i<varieties[idx].length; i++) {
f.box2.options[i]=new Option(varieties[idx][i], i);
}
}
window.onload=function() {
var box1=document.myform.box1;
box1.onchange=function(){Box2(this.selectedIndex);};
// create 2nd select
try { // IE
var sel=document.createElement("<select name=\"box2\"><\/select>");
}
catch(e) {
var sel=document.createElement("select");
sel.name = "box2";
sel.id = "box2";
}
document.myform.getElementsByTagName('div')[0].insertBefore(sel, box1.nextSibling);
// fill 2nd select
Box2(0);
}
</script>
<style type="text/css">
select {display:block; margin:1em 0;}
#box2 {color:red;}
</style>
</head>
<body>
<form name="myform" method="post" action="http://www.mysite.com/mysite">
<div>
<select name="box1">
<option value="">- Select a Sport -</option>
<option value="a">Basketball</option>
<option value="b">Football</option>
<option value="c">Baseball</option>
</select>
<button type="submit">submit</button>
</div>
</form>
</body>
</html>
