Question

My apologies for writing such a lengthy question but I was asked to clarify several details about the function

What would be the correct way to add another element to these If Statements if I want to call it by class or data-name (or another method which doesn’t require creating separate If Statements for each element which will utilize it)?

The function is used on pairs of 2 interconnected elements (who’s classes are complaint and ranking). The name of the 1rst Element matches the data-name of the 2nd Element, and since the function already identifies data-name of “ranking” maybe it can say that the name of the 1rst element = data-name of the 2nd element?

if ($(this).val() == 1 && !$(this).data("decrease_priority1")) { ... }
if ($(this).data("decrease_priority1") && $(this).val() != 1) { ... }

Here’s what I’m trying to do:

1rst If Statement – Set element if values are: “.complaint” = “Too_small” AND .”ranking” = “1”
2nd If Statement – Update element if values are: “.complaint” = “Too_small” OR .”ranking” = “1”

This 2nd element is the value of the select tag under the .complaint class, however there are several element with the same class so I need a way to specify which one it is. I’m trying to avoid using ID’s because there are 25 Select elements (so well over 100 combinations).

Method I’ve Tried

This doesn’t work properly (It doesn’t accept input unless the 1rst pair (Shoulders) is selected before the 2nd pair (Waist))

if ($(".complaint select").val() === "Too_small" && $(this).val() == 1 && !$(this).data("increase_priority1")) 
{ ... }

if ($(this).data("increase_priority1") && ($(this).val() != 1 || $(".complaint select").val() != "Too_small")) 
{ ... }

What the function does

The purpose of this Change function is to take all the complaint names selected (i.e. Shoulders, Waist) and group them into actions (i.e. increase or decrease) by ranking, so there are different functions that get called for the various combinations – in this case “Too_small” AND “1”. This snippet adds values to “increase_priority1” when the user selects both a complaint and ranks the importance level of the issue, and removes the value when the user changes either element.

If you want to see this in context, I created 2 fiddles. The first is of the existing script http://jsfiddle.net/chayacooper/vWLEn/171/ and the second is a working example of what I’m trying to do but it uses ID’s to do so http://jsfiddle.net/chayacooper/gYtZw/61/

Javascript

var $increase_priority1 = $(".increase_priority1");
// variables for other issues and priority levels go here

$(".ranking").change(function () {
    var name = $(this).data("name"); // Gets data-name of ".ranking" 

    // Sets & Unsets increase_priority1

    // I need to change this to state If values are "Too_small" AND "1" AND (...)  
    if ($(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 either ranking or complaint value changes 
    if ($(this).data("increase_priority1") && $(this).val() != 1) {
        //is in priority list, but now demoted
        $("option[value=" + name + "]", $increase_priority1).remove();
        $(this).removeData("increase_priority1"); // no longer a priority1 item
    }
    // Similar If Statements go here to set & unset elements for other priority types
});

If the value of $increase_priority1 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).

HTML

<label>To Increase - 1rst Priority
<select name="modify_increase_1rst[]" class="increase_priority1" multiple></select></label>    
<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>

Answer 1

Special thanks to @Lorax for helping me figure this out 🙂

I’ve included the final code below and created a working example of it at http://jsfiddle.net/chayacooper/6YnQd/42/

Javascript

$('.complaint select.complaintOpt').change(function() {
var $container = $(this).parent(),
    $item = $container.find('.complaintItem'),
    itemId = $item.attr('id'),
    itemVal = $item.val(),
    itemText = $item.find('option[value=' + itemVal + ']').html(),
    rank = $container.find('.complaintRanking').val();    
// Ignore if not a complete complaint
if((itemVal == 'Null') || (rank == 'Null')) {
    return;
}    
// Remove any existing complaint
$('select.priorityIssue option.' + itemId).remove();    
var $selectedOption = $item.find('option:selected');
var targetBase = '';
if($selectedOption.hasClass('goal-increase')) {
    targetBase = '#priorityIncrease';
}
else if($selectedOption.hasClass('goal-decrease')) {
    targetBase = '#priorityDecrease';
}    
if(targetBase != '') {
    // Add new complaint
    $(targetBase + rank + 'Issues')
        .append($('<option>' + $item.attr('name') + '</option>').addClass(itemId));
}
});

HTML

<label>To Increase </label><br/>
<label for="priorityIncrease1Issues">First Priority</label>
<select name="modify_increase_1rst[]" id="priorityIncrease1Issues" class="priorityIssue" multiple></select>
<label for="priorityIncrease2Issues">Second Priority</label>
<select name="modify_increase_2nd[]" id="priorityIncrease2Issues" class="priorityIssue" multiple></select>
<br/>
<label>To Decrease </label><br/>
<label for="priorityDecrease1Issues">First Priority</label>
<select name="modify_decrease_1rst[]" id="priorityDecrease1Issues" class="priorityIssue" multiple></select>
<label for="priorityDecrease2Issues">Second Priority</label>
<select name="modify_decrease_2nd[]" id="priorityDecrease2Issues" class="priorityIssue" multiple></select>
<br />
<div class="complaint">
<label for="shoulders">Shoulders</label>
<select name=Shoulders id="shoulders" class="complaintOpt complaintItem">
    <option value="Null">Select</option>
    <option value="too_big" class="goal-decrease">Too Big</option>
    <option value="too_small" class="goal-increase">Too Small</option>
</select>    
<label for="shouldersRanking">Ranking</label>
<select name="importance_bother_shoulders" id="shouldersRanking" class="complaintOpt complaintRanking">
    <option value="Null">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select> 
</div>