jQuery Forum

I've had a look around multiple websites regarding drop downs and alot of the code I have come across has varied in "syntax" and structure greatly so I have been somewhat confused.

I am sort of a newbie when it comes to webdesign but I've recently began designing a website for a game guild I started and will be adding a application form that posts into our forums (all sorted).

What I aim to do, is when someone selects a Class (such as a warrior, mage, rogue in warcraft) from a drop down list, another drop down list straight below it will have it's options changed.

For non-star wars geeks, I have a drop down with four classes. Jedi Knight, Jedi Consular, Trooper and Smuggler. When someone selects Jedi Knight for example, I want the drop down list below to change the options within based on this selection.

I have tried my hand at creating a JQuery script but alas, I am a newbie at this. I learnt of it a couple of days ago and have tried my hardest to learn what I can. I saw on websites that JQuery is the way to go for this, so hopefully someone can help.

e.g.

DDL1: Which class do you wish to apply as? [Jedi Knight]
DDL2: Which Role for this class do you wish to play as? [Guardian or Sentinel]

So as you can see, if someone selects a class, the role DDL with change to show the two roles that reflect that class. Roles being a specialization of a class.

The HTML I have written for these two selects are:

1. <select name="charclass">
       <option selected>Choose a class!</option>
       <option value="JK">Jedi Knight</option>
       <option value="JC">Jedi Consular</option>
       <option value="SM">Smuggler</option>
       <option value="TR">Trooper</option>
       </select>
2. <select name="role">
       <option selected>Tank</option>
       <option>Healer</option>
       <option>Damage Dealer</option>
       </select>

As a class can have two distinct damage dealing roles, the second isn't specific enough thus the need for this.

My failed JQuery attempt:

1. $(document).ready(function(){
       
       var $charclass = $("select[name='charclass'] option:selected");
       var $role = $("select[name='role']");
       
       $charclass.change(function() {
       
       if ($(this).val() == "JK"){
           $("select[name='role']").remove();
           $('<option>Choose one!</option>').append($role);
           $('<option>Guardian</option>').append($role);
           $('<option>Sentinel</option>').append($role);
       }
       
       if ($(this).val() == "Jedi Consular") {
           $("select[name='role']").remove();
           $("<option>Choose one!</option>").append($role);
           $("<option>Mage</option>").append($role);
           $("<option>Wizard</option>").append($role);
       }
       
       if ($(this).val() == "Trooper") {
           $("select[name='role']").remove();
           $("<option>Choose one!</option>").append($role);
           $("<option>Vanguard</option>").append($role);
           $("<option>Commando</option>").append($role);
       }
       
       if ($(this).val() == "Smuggler") {
           $("select[name='role']").remove();
           $("<option>Choose one!</option>").append($role);
           $("<option>Gun Slinger</option>").append($role);
           $("<option>Scoundrel</option>").append($role);
       }
       
       });
       });

I have only attempted this for one class but I assume you use an else { if {}} sort of structure.

I am rushing this but if you need further clarification, I am happy to elaborate on my mumblings.

Any help is appreciated and many thanks in advance to those who offer any help, even in the slightest =]