Specifying $(this).val() for two different elements (by class)
- by Chaya Cooper
What would be the correct syntax for specifying 2 elements by class to evaluate their values when they have different classes?
This snippet adds and/or removes values from "increase_priority1" when the user has selected both a complaint and ranked the importance level of the issue, however when I added the 2nd element (".complaint select") to the If Statement it stopped working properly and only accepts input from the 2nd item (Waist) after the 1rst item (Shoulders) has been selected.
I believe the problem is that it's unable to determine which ".complaint select" to use, but I haven't been able to figure out how to use (this) for the 2nd element, or another similar approach.
The complete function includes apx. 20 similar pairs of If Statements to set & unset other elements, and a working example with 4 pairs is available at http://jsfiddle.net/chayacooper/vWLEn/168/ I'm trying to avoid using ID's because that becomes pretty cumbersome to do for 25 Select elements and each of their values (ID's were also problematic because it stopped working when I added a 2nd element to the If Statement for removing/unsetting a value)
Javascript
var $increase_priority1 = $(".increase_priority1");
// If value is "Shoulders", complaint was Shoulders too small (select name=Shoulders value=Too_small) and it was assigned a level 1 priority (select class="ranking shoulders" value=1).
// var's for other issues and priority levels go here
$(".ranking, .complaint select").change(function() {
var name = $(this).data("name"); //get priority name
if ($(".complaint select").val() === "Too_small"
&& $(this).val() == 1 && !$(this).data("increase_priority1")) {
//rank is 1, and not yet added to priority list
$("<option>", {text:name, val:name}).appendTo($increase_priority1);
$(this).data("increase_priority1", true); //flag as a priority item
}
if ($(this).data("increase_priority1") &&
($(this).val() != 1 || $(".complaint select").val() != "Too_small")) {
//is in priority list, but now demoted
$("option[value=" + name + "]", $increase_priority1).remove();
$(this).removeData("increase_priority1"); //no longer a priority item
}
// Similar If Statements to set & unset other elements go here
});
HTML
<div>
<label>To Increase - 1rst Priority
<select name="modify_increase_1rst[]" class="increase_priority1" multiple>
</select></label>
</div>
<div>
<span class="complaint">
<label>Shoulders</label>
<select name=Shoulders>
<option value="null">Select</option><option value="Too_small">Too Small</option><option value="Too_big">Too Big</option><option value="Too_expensive">Too expensive</option>
</select>
</span>
<label>Ranking</label>
<select name="importance_bother_shoulders" class="ranking shoulders" data-name="Shoulders">
<option value="Null">Select</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div>
<span class="complaint">
<label>Waist</label>
<select name=Waist>
<option value="null">Select</option><option value="Too_small">Too Small</option><option value="Too_big">Too Big</option><option value="Too_expensive">Too expensive</option>
</select>
</span>
<label>Ranking</label>
<select name="importance_bother_waist" class="ranking waist" data-name="Waist">
<option value="Null">Select</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
<option value="5">5</option>
</select>
</div>
