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>

Recommended Answers

All 11 Replies

Member Avatar for LastMitch

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!

I will be honest with you I got no idea what you are doing. The reason is the URL. I mean a dropdown box I can understand but you also want have a url with the dropdown box label?

You mean something like this:

<form name="myform" method="post" action="http://www.mysite.com/mysite">
<select name="box1" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.recruitcolorado.blogspot.com/search/label/Baseball">Baseball</option>
<option value="http://www.recruitcolorado.blogspot.com/search/label/Baseball+Football">Baseball & Football</option>
<option value="http://www.recruitcolorado.blogspot.com/search/label/Baseball+2013+Pitcher">Baseball & 2013 & Pitcher</option>
</select>
</form>

If someone choose one of the selection it will redirected to that page but you need to make sure that page is active.

I'm not familiar with Blogger but this is the only thing I can think of base on what you post.

You also can look at this:

http://javascript.about.com/library/bl3drop.htm

The page you posted is almost exactly what I wanted: http://javascript.about.com/library/bl3drop.htm (others are http://www.javascriptkit.com/script/script2/triplecombo.shtml and http://www.javascriptkit.com/script/script2/2levelcombo.shtml)--- I've been trying to re-find the one you posted for some time now. It still doesn't solve my issue, though.

With all the positions and sports and grad years, there would be so many countless options that I would have to update far too often. I want to know if there's a way to merely append to a given url based on the selection. The suffixes are the only thing that changes, and it's directly dependent on the combination of the boxes chosen.

Here's an example of what I'm talking about: http://stackoverflow.com/questions/13865590/javascript-append-a-parameter-of-an-option-to-url-retrieved-by-a-dropdown-menu --- but I'd need to have mine appended with a + sign in between each selection.

If you can help, awesome. If not, I appreciate your effort nonetheless.

depending on your back end... this seems like it's more of a database/sort issue... but if really all you need to do is append +whatever to the url...

function submit()
{
    var mySelectBox = document.getElementById("mySelectBox");
    var myWord = mySelectBox.options[mySelectBox.selectedIndex].text;

    var URL = document.URL;
    if (URL.lastIndexOf("/") != URL.length)  /* this assumes URL ends with "/" */
        URL += "+";

    URL += String(myWord); //cast for sanity


    window.location = URL;  //if this doesn't work try window.location.href = URL (or use both for sanity).
}

so on your "submit" button, your onclick="submit();" alternatively, if you are submitting a form you can do onsubmit="submit();" on the form... so many ways to cook chicken...

if your URL does not end with "/" you can do any number of string surgery operations to figure out if you need to pre-append a "+". For example, you can use URL.lastIndexOf(".com") != URL.length - 4

This is really not the best way to do this, but if it is what's required for your system then it's what you need.

All this definitely works, but I'm still not understanding how to make my second select box dependent on the first. I'd like only the positions having to do with that sport to show once that sport is selected. Before the sport is selected, I'd like the box to be grayed out and "unselectable"(?)... if that makes sense.

Here's what I have so far, based on everyone's great help. If any of you can help me complete it, that would be awesome. Thanks a ton.

<script type="text/javascript" src="http://dl.dropbox.com/u/5739741/OMAR/code/jquery-1.7.1.js"></script>
<style>
.finder{
background-color: #000000;
padding:2px 3px 2px 3px;
color:white;
text-decoration: none;
display:block;
width:100px;
text-align:center;
}
.finder:hover{
color:#ff0000;
background-color:#111111;
}
.finder:active{
color:#990000;
}
</style>
<script>
var SourceUrl = "http://www.recruitcolorado.blogspot.com/search/label/Recruit";
var sportUrl = "";
var positionUrl = "";
var gradUrl = "";
$(function() {
  //For showing default url  
  MakeUrl();
  $('#sportSelect').on('change', function () {
      if($(this).val() == 0) {
         sportUrl = "";
      } else {
          sportUrl = $(this).val();
      }
      MakeUrl();
      return false;
  });
    $('#positionSelect').on('change', function () {
      if($(this).val() == 0) {
         positionUrl = "";
      } else {
         positionUrl = $(this).val();
      }
     MakeUrl();
     return false;
  });
    $('#grad').on('change', function () {
      if($(this).val() == 0) {
         gradUrl = "";
      } else {
         gradUrl = $(this).val();
      }
     MakeUrl();
     return false;
  });
});
function MakeUrl() {
    var finalUrl = SourceUrl + sportUrl + positionUrl + gradUrl;
   $('#urlBox').val(finalUrl);
  $('#MyLink').attr('href', finalUrl);
}
</script>
<input type="hidden" value="" id="urlBox" readonly />
<br/><br/>
<select id="sportSelect" style="width:200px;">
<option value="0" label="- CHOOSE A SPORT -" />- CHOOSE A SPORT -
<option value="+Basketball" label="Basketball" />Basketball
<option value="+Baseball" label="Baseball" />Baseball
<option value="+Soccer" label="Soccer" />Soccer
<option value="+Football" label="Football" />Football
<option value="+Hockey" label="Hockey" />Hockey
<option value="+Tennis" label="Tennis" />Tennis  
</select><br /><br />
<select id="positionSelect" style="width:200px;">
<option value="0" label="- CHOOSE A POSITION -" />- CHOOSE A POSITION -
<option value="+PointGuard" label="Point Guard" />Point Guard
<option value="+Center" label="Center" />Center
</select><br /><br />
<select id="grad" style="width:200px;">
<option value="0" label="- CHOOSE A GRAD YEAR -" />- CHOOSE A GRAD YEAR -
<option value="+2017" label="Class of 2017" />Class of 2017
<option value="+2018" label="Class of 2018" />Class of 2018
</select><br /><br />
 <a id="MyLink" href="" class="finder" style="color:white;">Find Player</a>
Member Avatar for LastMitch

All this definitely works, but I'm still not understanding how to make my second select box dependent on the first. I'd like only the positions having to do with that sport to show once that sport is selected. Before the sport is selected, I'd like the box to be grayed out and "unselectable"(?)... if that makes sense.

You did a good job and it works!

Maybe you can explain little more of what you are trying to do?

Can you post an image to match what you mention regarding about grayed out and "unselectable"(?).

So far everything looks good.

You mean like this if I select basketball, then Center, then Class of 2017

I attached an image of the result you did and the url (is this corrected):

b5b24ee8e47f689fdcd54a9114d228f0

Thanks. I'm trying pretty hard. Just not much knowledge to work with :-)

What I'm trying to accomplish is exactly what I've done above, but now I'd like to add this functionalaity: http://javascript.about.com/library/bl3drop.htm --- but only for the Sport and Position categories.

So when someone picks basketball, the options in the position category will be Point Guard, Shooting Guard, Small Forward, Power Forward, and Center. But when they pick Baseball, the options in that same select box are Pitcher, Catcher, etc.

Below is how I would piece that together, but I have no clue how to combine it with what I did above. This guy on here named AirShow made this chooser for me some time ago that has kinda what I'm talking about, too: http://www.epicballers.com/p/private-sessions.html

<script>
function setOptions(chosen) {
var selbox = document.myform.opttwo;

selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('select a sport first',' ');

}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new
Option('Guard','oneone');
  selbox.options[selbox.options.length] = new
Option('Forward','onetwo');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new
Option('Pitcher','twoone');
  selbox.options[selbox.options.length] = new
Option('Catcher','twotwo');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new
Option('Quarterback','threeone');
  selbox.options[selbox.options.length] = new
Option('Runningback','threetwo');
}
}
</script>

<form name="myform"><div align="center">
<select name="optone" size="1"
onchange="setOptions(document.myform.optone.options
[document.myform.optone.selectedIndex].value);">
<option value=" " selected="selected">- choose a sport -</option>
<option value="1">Basketball</option>
<option value="2">Baseball</option>
<option value="3">Football</option>
</select><br> <br>
<select name="opttwo" size="1">
<option value=" " selected="selected">select a sport first</option>
</select>
<input type="button" name="go" value="Find Player"
onclick="alert(document.myform.opttwo.options
[document.myform.opttwo.selectedIndex].value);">
</div></form>
Member Avatar for LastMitch

So when someone picks basketball, the options in the position category will be Point Guard, Shooting Guard, Small Forward, Power Forward, and Center. But when they pick Baseball, the options in that same select box are Pitcher, Catcher, etc.

I don't know if you can merge the code like that. I try and it's not working.

This the javascript code from the website:

<script type="text/javascript">
function setOptions(chosen, selbox) {

selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
setTimeout(setOptions(' ',document.myform.optthree),5);
}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('first choice - option one','11');
selbox.options[selbox.options.length] = new Option('first choice - option two','12');
setTimeout(setOptions('11',document.myform.optthree),5);
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('second choice - option one','21');
selbox.options[selbox.options.length] = new Option('second choice - option two','22');
setTimeout(setOptions('21',document.myform.optthree),5);
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('third choice - option one','31');
selbox.options[selbox.options.length] = new Option('third choice - option two','32');
setTimeout(setOptions('31',document.myform.optthree),5);
}
if (chosen == "11") {
selbox.options[selbox.options.length] = new Option('first choice - option one - sub one','111');
selbox.options[selbox.options.length] = new Option('first choice - option one - sub two','112');
}
if (chosen == "12") {
selbox.options[selbox.options.length] = new Option('first choice - option two - sub one','121');
selbox.options[selbox.options.length] = new Option('first choice - option two - sub two','122');
}
if (chosen == "21") {
selbox.options[selbox.options.length] = new Option('second choice - option one - sub one','211');
selbox.options[selbox.options.length] = new Option('second choice - option one - sub two','212');
}
if (chosen == "22") {
selbox.options[selbox.options.length] = new Option('second choice - option two - sub one','221');
selbox.options[selbox.options.length] = new Option('second choice - option two - sub two','222');
}
if (chosen == "31") {
selbox.options[selbox.options.length] = new Option('third choice - option one - sub one','311');
selbox.options[selbox.options.length] = new Option('third choice - option one - sub two','312');
}
if (chosen == "32") {
selbox.options[selbox.options.length] = new Option('third choice - option two - sub one','321');
selbox.options[selbox.options.length] = new Option('third choice - option two - sub two','322');
}
}
</script>

This is the form:

<form name="myform">
<div align="center">
<select name="optone" size="1"
onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value,document.myform.opttwo);">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select><br> <br>
<select name="opttwo" size="1"
onchange="setOptions(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value,document.myform.optthree);">
<option value=" " selected="selected">Please select one of the options above first</option>
</select><br> <br>
<select name="optthree" size="1">
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<input type="button" name="go" value="Value Selected" onclick="alert(document.myform.optthree.options[document.myform.opttwo.selectedIndex].value);">
</div>
</form>

Maybe you can take a look at it. Just copy and paste the whole code on to a blank txt file and name it base.html

and also add this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Then open the file and test out the code. Hopefully it will give you an idea. I'm not good at javascript and I'm still learning.

Let me know which part of the code you don't understand and maybe try to explain it to you.

Yea, I saw that code. Intertwining it into the whole appending code is what seems impossible. I'll ask around in a few private message.

Got it workin, thanks for AirShow... Thanks everyone for the help!

<style type="text/css">
select {
    display: block;
    margin: 1em 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var positions = {
        MensBasketball: ["Guard", "Forward", "Center"],
        Football: ["Quarterback", "Running Back", "Defensive End"],
        Baseball: ["Pitcher", "Catcher", "Outfield"]
    };
    var $$ = {
        'form': $("form[name='myform']"),
        'boxes': $(".box"),
        'submit': $("button[type='submit']")
    };
    $$.boxes.eq(0).on('change', function(evt) {
        var $targetBox = $$.boxes.eq(1);
        $targetBox.find("option").each(function(i, opt) {
            if(i==0) return;
            $(opt).remove();
        });
        var pos = positions[this.value] || [];
        $.each(pos, function(i, p) {
            $("<option/>").val(p).text(p).appendTo($$.boxes.eq(1));
        });
        $targetBox.attr('disabled', ($targetBox.find('option').length <= 1) ? true : false);
    }).trigger('change');
    $$.form.on('submit', function(evt) {
        evt.preventDefault();
        var url = composeURL();

        if(url) {
            location = url;
        }
        else {
            alert("No filter options are selected");
        }

        /* alert(url);//for debugging */
    });
    function composeURL() {
        var baseURL = 'http://www.recruitcolorado.blogspot.com/search/label/';
        var q = [];
        $.each($$.boxes, function(i, box) {
            if(box.selectedIndex > 0) {
                q.push(box.value);
            }
        });
        return q.length ? (baseURL + q.join('+')) : null;
    }
});
</script>



<form name="myform" method="post" action="http://www.recruitcolorado.blogspot.com/search/label/">
    <div>
        <select class="box" id="box1" name="box1">
            <option value="">- Select a Sport -</option>
            <option value="MensBasketball">Men's Basketball</option>
            <option value="Football">Football</option>
            <option value="Baseball">Baseball</option>
        </select>
        <select class="box" id="box2" name="box2">
            <option value="">- Select a Position -</option>
        </select>
        <select class="box" id="box3" name="box3">
            <option value="">- Select a Graduation-Year -</option>
            <option value="2010">2010</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
        </select>
        <button type="submit">Filter Recruits</button>
    </div>
</form>
Member Avatar for LastMitch

Got it workin, thanks for AirShow

@jonsan32

I'm glad you got it working!

I read the code and it's nice (very complicated) ... now you owe Airshow some future draft picks ... I can see some $$ for those prospects.

Airshow, you should do encore what you did! =)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.