Looking for mutiple level pulldown menu with a twist

Forum Moderators: open

Message Too Old, No Replies

Looking for mutiple level pulldown menu with a twist

stu2

6:30 pm on Mar 13, 2010 (gmt 0)

I have a Classified Ads website. I want to put a pulldown menu in a form with onchange which looks like this...

Regions / Provinces / Categories

Categories would be hidden until either Regions or Provinces is clicked.

Click on Regions and Select a Region and hide Provinces and populate Categories. Click on Categories and click on a Category and do a search for all ads in that Region/Category.

Click on Provinces and Select a Province and hide Regions and populate Categories. Click on Categories and click on a Category and do a search for all ads in that Province/Category.

It's basically an either/or (Region/Province) Category Search. The Categories are the same in both Regions and Provinces.

Clicking on the top level in any of the three menus should reset the menu at it's startup default (with hidden Categories).

Does anyone know of a script that will do this or would like to make an attempt at one?

Fotiman

4:10 pm on Mar 15, 2010 (gmt 0)

Something like this:


<!DOCTYPE html>
<html>
<head>
<title>Test Menu</title>
<style type="text/css">
.invisible { visibility: hidden; }
</style>
</head>
<body>
<select id="regions">
<option value="">Reset Menu</option>
<option value="1">Region 1</option>
<option value="2">Region 2</option>
<option value="3">Region 3</option>
</select>
<select id="provinces">
<option value="">Reset Menu</option>
<option value="1">Province 1</option>
<option value="2">Province 2</option>
<option value="3">Province 3</option>
</select>
<select id="categories" class="invisible">
<option value="">Reset Menu</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
</select>
<script type="text/javascript">
(function () {
var regions = document.getElementById('regions'),
  provinces = document.getElementById('provinces'),
  categories = document.getElementById('categories');
function menuHandler(el) {
  if (el.selectedIndex === 0) {
    regions.disabled = provinces.disabled = false;
    categories.style.visibility = 'hidden';
  }
  else {
    categories.style.visibility = 'visible'
    if (el === regions) {
      provinces.disabled = true;
    }
    else if (el === provinces) {
      regions.disabled = true;
    }
    else if (el === categories) {
      // do search
      if (regions.disabled) {
        // province search
        alert('province search');
      }
      else {
        // regions search
        alert('regions search');
      }
    }
  }
}
regions.onchange = function () {
  menuHandler(regions);
};
provinces.onchange = function () {
  menuHandler(provinces);
};
categories.onchange = function () {
  menuHandler(categories);
};
})();
</script>
</body>
</html>

Note, it's generally not a good idea to create menus that are totally dependent on JavaScript, as users without JavaScript enabled will not be able to access the menu, so you should have some sort of backup in place.

Also, this example sets the style directly on the category element. A better solution would be to toggle the class, but for simplicity of this demo I went for the quick and dirty method. :)

stu2

1:25 am on Mar 16, 2010 (gmt 0)

Thanks. All I need know now is where I put the URL activated by a Region search by Category or by a Province search by Category.

I know about the Javascript dependance. There are other ways of getting to this same search by using the regular menus. This is a "quick and dirty method" :)

stu2

12:41 pm on Mar 16, 2010 (gmt 0)

Of course that should be URLs in plural. I have about 18 Regions, 100 Provinces, and maybe 15 Main Categories. So that's 18x15 + 100x15 = 1750+ URLs.

Fotiman

1:38 pm on Mar 16, 2010 (gmt 0)

In the code where I added the alerts, that's where you'd do the search. So you could get the value of regions and the value of categories and use those to create the URL, or the value of provinces and categories.

stu2

10:18 pm on Mar 16, 2010 (gmt 0)

Sorry, but I don't know how to use those values to create a URL to search. Could you provide an example of how I would use those values in a URL search? OK, I know this won't be precise, but I need an example of how those values might be included in a URL, so I could replicate that for my own URLs

Say Region 1 Category 1, and Province 3 Category 3?

OK. I know each Region, Province, Category has a database numeric value which I would replace the "option value" 1,2,3 with. But the question is, how to inject these captured values into my URL?

Fotiman

1:05 pm on Mar 17, 2010 (gmt 0)

Well, you would need to set the location to a URL that points to a page that does the search. You need some server side page to do the actual search (like PHP, ASP, etc.). Do you have that in place?

To do the redirection it would be something like this:

location = 'http://www.example.com/yourSearchPage.php?r=' + regions.value + '&c=' + categories.value

In that example, this assumes yourSearchPage.php is expecting an "r" and a "c" parameter (and perhaps it also checks for a "p" parameter for provinces).

stu2

11:31 pm on Mar 17, 2010 (gmt 0)

OK. I just read this. I think I've got what I need r=' + regions.value +' c=' + categories.value'

In this case for my two examples would return

Region 1 + Category 1 = r='1'&c='1'
Province 3 + Category 3 = p='3'&c='3'

Correct? Yes/No?

Of course I need to replace r/p/c with whatever my software uses for those parameters.

This is a much better solution than all the others I've tried. I just need 2 lines of code (1 for Regions & 1 for Provinces).

Can I ask, why are the "+" necessary? Why not write r='regions.value'&c='categories.value'?

Is that really ' + regions.value +' and only ' + categories.value' (no trailing plus)?

Is case important in the syntax? For example. If I define my regions as "Regions" does it then need to be "Regions.value"?

And finally, I replace "alert('province search')" with what in order for it to execute the url directly?

Fotiman

1:10 pm on Mar 18, 2010 (gmt 0)

In this case for my two examples would return

Region 1 + Category 1 = r='1'&c='1'
Province 3 + Category 3 = p='3'&c='3'

Close. In my example, the string would end up looking like this:
http://www.example.com/yourSearchPage.php?r=1&c=1

(assuming you selected the options with value 1 for both of those items)

Of course I need to replace r/p/c with whatever my software uses for those parameters.

Correct. That's why I asked if you had a server side page in place already to process the form.

Can I ask, why are the "+" necessary? Why not write r='regions.value'&c='categories.value'?

In JavaScript, the + is the concatenation operator. So to concatenate values into a string, you need that in there. Without it, you would get a syntax error. And correct, there would be no trailing + as you have nothing else to concatenate.

JavaScript is case sensitive, so yes, case is important.

And finally, I replace "alert('province search')" with what in order for it to execute the url directly?

location = 'http://www.example.com/yourSearchPage.php?r=' + regions.value + '&c=' + categories.value;

or

location = 'http://www.example.com/yourSearchPage.php?p=' + provinces.value + '&c=' + categories.value;

(depending on which search you were doing).

stu2

7:38 pm on Mar 18, 2010 (gmt 0)

Thank you very much. This is exactly what I needed to know in order to implement this. I'll now get to the coding and let you know how it turns out. Thank you again. You have been very helpful and patient.

Oh. I just noticed 1 thing with your URL. You didn't put two trailing ' before the final ;. 1 for the 'http statement and 1 for the ' + categories.value statement. Is that intentional? Or should it be written "'http.....;"?

stu2

8:52 pm on Mar 19, 2010 (gmt 0)

OK. I think I figured out this ' thing. I've sent you a sticky mail.

Fotiman

9:22 pm on Mar 19, 2010 (gmt 0)

Oh. I just noticed 1 thing with your URL. You didn't put two trailing ' before the final ;. 1 for the 'http statement and 1 for the ' + categories.value statement. Is that intentional? Or should it be written "'http.....;"?

That was intentional. Here's what it looks like if I split each concatenation up into multiple lines. It might make it easier to understand what's happening:


location = 'http://www.example.com/yourSearchPage.php?r=' +
  regions.value + 
  '&c=' + 
  categories.value;

Line 1 contains a string, line 2 contains a variable so it's not wrapped in quotes, line 3 is a string, line 4 ends with another variable so no quotes needed.

stu2

11:56 pm on Mar 19, 2010 (gmt 0)

Thanks Fotiman. Great work. There is now only 1 very minor issue with this script in order to make it perfect, imho. If you select the first category in the Category menu, namely "Category" the menu doesn't reset to it'd default. Is that possible?

Fotiman

3:43 am on Mar 20, 2010 (gmt 0)

With the example I posted, selecting the first category would also reset the menu.