I have a form with a bunch of dropdown options that I'm dressing up by allowing the option to be selected by clicking links and (in the future, images) instead of using the actual dropdown. There are a lot of dropdowns and most all will repeat the same basic idea, and some will literally repeat just with different variables. Here's the HTML for one of those.
<tr class="box1">
<td>
<select id="cimy_uef_7">
<option value="Boy">Boy</option>
<option value="Girl">Girl</option>
</select>
</td>
</tr>
Then the corresponding fancier links to click that will select the corresponding option in the dropdown.
<div id="genderBox1">
<div class="gender"><a class="boy" href="">Boy</a></div>
<div class="gender"><a class="girl" href="">Girl</a></div>
</div>
So, when you click the link "Boy" it will select the corresponding dropdown value "Boy" There are going to be multiple Box#, so I can just repeat the jQuery each time with the new variables, but there's surely a shorter way. Here's the jQuery that makes it work.
//Box1 Gender
var Gender1 = $('select#cimy_uef_7');
var Boy1 = $("#genderBox1 .gender a.boy");
var Girl1 = $("#genderBox1 .gender a.girl");
//On Page Load - Check Gender Box 1 Selection and addClass to corresponding div a
if ( $(Gender1).val() == "Boy" ) {
$(Boy1).addClass("selected");
} else {
$(Boy1).removeClass("selected");
}
if ( $(Gender1).val() == "Girl" ) {
$(Girl1).addClass("selected");
} else {
$(Girl1).removeClass("selected");
}
//On Click - Change Gender Box 1 select based on image click
$(Boy1).click(function(event) {
event.preventDefault();
$(this).addClass("selected");
$(Gender1).val("Boy");
$(Girl1).removeClass("selected");
});
$(Girl1).click(function(event) {
event.preventDefault();
$(this).addClass("selected");
$(Gender1).val("Girl");
$(Boy1).removeClass("selected");
});
My thought for shortening it was to just have a list of variables for each box and cycle through the numbers- 1,2,3,4 and have the jQuery grab the same # for each variable, but I can't figure out a way to do it.
Let me know if there's anything else I can provide to make the question better. This is my best idea for shortening this code, as I'm still very much a beginner at jQuery, but I'm positive there are much better ideas out there, so feel free to recommend a better path if you see it :)
