// We can get the selected value from the select itsself, not the options.
const selected_class = $("#classSelection").val();
// A function we want to use differently depending on what was selected.
const create_class = function( attr_str, attr_con, attr_int ) {
// create a new character with these stats.
return 'creating new class with stats: ' + attr_str + '|' + attr_con + '|' + attr_int;
};
// Might as well use an object to store the function calls instead of a list of if/else statements. It's easier to add extra options this way.
const class_functions = {
all: function() {
// create one of each class
},
duelist: function() {
return create_class( 18, 14, 8 );
},
marauder: function() {
return create_class( 20, 16, 4 );
},
ranger: function() {
return create_class( 14, 14, 12 );
},
scion: function() {
return create_class( 12, 20, 10 );
},
shadow: function() {
return create_class( 12, 12, 16 );
},
templar: function() {
return create_class( 16, 12, 14 );
},
witch: function() {
return create_class( 8, 8, 20 );
}
};
// Create the selected class. Scion is selected in the dropdown.
const character = class_functions[ selected_class ]();
console.log( character );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="classSelection">
<option value="all">All</option>
<option value="scion" selected>Scion</option>
<option value="marauder">Marauder</option>
<option value="ranger">Ranger</option>
<option value="witch">Witch</option>
<option value="duelist">Duelist</option>
<option value="templar">Templar</option>
<option value="shadow">Shadow</option>
</select>