Just a quick note: I have also asked this on other forums. I have a feeling that this is something that may end up helping a lot of developers, so even if I get an answer somewhere else (or figure this out before then), I will post it here as well.
What I wish to do, simply and distinctly is:
1. a) Select an option on the "first dropdown list (Fruit)".
b) Set the default value on the "second dropdown list (Fruit_Types)", based upon the selection of the first.
2. Optimally all values (under Fruit_Types) related to the First selection value would be populated in the second selection box.
3. Use one small jQuery function to do this and have no reference to the jQuery on the selection list. In other words I should be able to drop this in to any html page with any two related lists (see code) and it should work. The jquery should be completely autonomous.
4. This code should be useful in a WordPress, Drupal, Joomla environment where you may or may not have excellent access to the DropDown lists being made, just the ids.
I would appreciate any help at all with this.
Please let me know if someone can help me get this to work properly. Thank You.
Most of the work is already done (see code), however I would like this to work all the time, every time. So far it only works under these conditions:
1. On Page Refresh/Load
2. One time after the page loads
Then it stops working.
Here is my code: