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:
- <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> - <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:
- $(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 =]