homepage Welcome to WebmasterWorld Guest from 54.204.68.109
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Looking for mutiple level pulldown menu with a twist
stu2




msg:4097034
 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




msg:4098059
 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




msg:4098461
 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




msg:4098710
 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




msg:4098743
 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




msg:4099109
 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




msg:4099495
 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




msg:4099973
 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




msg:4100311
 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




msg:4100620
 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




msg:4101272
 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




msg:4101292
 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




msg:4101367
 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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved