Hiding and Showing Selecboxes Using jQuery Selectmenu Plugin

I am trying to use the jQuery Selectbox plugin to create cascading selectboxes. I have 2 selectboxes; one listing s/w (tool) and one for tool version. I want to be able to select a tool, show the tool version selectbox and write version-specific data to the screen. I have this working w/out using the Selectbox plugin by inserting the following into the “if (tool == "toolname") { “ section of code:

$("#tb select:not(#tool, #cgs)").hide(); 

But this does not seem to work w/ the Selectbox plugin. I suspect it is due to my limited Javascript and jQuery experience. If I could get “tool” to be global I could 开发者_开发问答use it on the last line of $(document).ready(function(). Right now it only works if I hardcode the tool name into the last line:

$('select#toolname).selectmenu({maxHeight: 150}).parent("fieldset").hide(); 

The javascript and HTML is listed below. Any thoughts or help would be greatly appreciated. Thanks in advance.

Ken

Javascript Pastie: http://pastie.org/2685454

HTML Pastie: http://pastie.org/2685522

Here is the final solution and hopefully it will help someone:

Javascript Pastie: http://pastie.org/2695842

First off, your Javascript doesn't run. You don't close the handler for #cgs (which is likely a mistake, since it's under the dpss else case.)

In the callback, you can get the real value of the select element with this.value - options.value does not seem to work.

tool also doesn't get defined until after you select a tool with the menu - that line should go in the select callback function so it doesn't get run before the variable is defined.