How can I trigger this change function if either of 2 elements change?

Question

How can I trigger this function if either ".ranking" or ".complaint select" are changed?

This change function adds and/or remove values from "increase_priority1" when the user selects a complaint and ranks the importance level of the issue. At the moment it's only being triggered when "ranking" changes, and therefore if the user changes the issue but not the importance level it isn't changing the value accordingly.

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
});

There are several complaint and ranking elements, reflecting the various areas customers complain about and ranking on a scale of 1 - 5.

Fiddle which shows this in context: http://jsfiddle.net/chayacooper/vWLEn/168/

Answer 1

It would probably be easier if you restructured your code. How about this:

HTML:

<label for="priority1Issues">First Priority</label>
<select id="priority1Issues" class="priorityIssue" multiple></select>

<label for="priority2Issues">Second Priority</label>
<select id="priority2Issues" class="priorityIssue" multiple></select>

<br />
<div class="complaint">
    <label for="shoulders">Shoulders</label>
    <select id="shoulders" class="complaintOpt complaintItem">
        <option value="Null">Select</option>
        <option value="too_big">Too Big</option>
        <option value="too_small">Too Small</option>
    </select>

    <label for="shouldersRanking">Ranking</label>
    <select id="shouldersRanking" class="complaintOpt complaintRanking">
        <option value="Null">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>

Now you can use the <div> with class complaint to selectively target it's content:

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 (using the CSS class to target the correct option)
    $('select.priorityIssue option.' + itemId).remove();

    // Add new complaint (we include a CSS class to make it easier to refer to this
    //   particular type of complaint later, if necessary)
    $('#priority' + rank + 'Issues')
        .append($('<option>' + itemText + '</option>').addClass(itemId));
});

You should now be able to duplicate the 'complaint div' for other items (just make sure you change the IDs of the <select> elements in the new div). There is an example here: http://jsfiddle.net/6YnQd/

Answer 2

Try it like this

$(".ranking, .complaint select").change(function() {
    ...
}