Ranking Increase

Works properly

by chayacooper

HTML

<script src=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.js"></script>
<h3><b>MultiSelect Elements Being Set</b></h3>    
<br/ >

<h3><b>Increase</b></h3><br/>
<label>1rst Priority Issues
    <select name="modify_increase_1rst[]" class="increase_priority1" multiple>
    </select>
</label>
<label>2nd Priority Issues
    <select name="modify_increase_2nd[]" class="increase_priority2" multiple>
    </select>
</label>
<br/><br/> 

<h3><b>Decrease</b></h3><br/>
<label>1rst Priority Issues
    <select name="modify_decrease_1rst[]" class="decrease_priority1" multiple>
    </select>
</label>
<label>2nd Priority Issues
    <select name="modify_decrease_2nd[]" class="decrease_priority2" multiple>
    </select>
</label>
<br/><br/><br/>

<h3><b>Trigger Elements</b></h3>
<h3><b>Step 1) Select Issue </b><i> (This needs to be added to the script)</i>  
<h3><b>Step 2) Select Ranking </b><i> (Currently only works for 2 Rankings (1 & 2)</i></h3>
 <br/> 
    <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
<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>
</label>

<br/><br/> 

<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
<select name="importance_bother_waist" class="ranking waist"...

CSS

select { margin-left:10px; margin-right:10px; }

JavaScript

var $increase_priority1= $(".increase_priority1");
var $decrease_priority1 = $(".decrease_priority1");
var $increase_priority2 = $(".increase_priority2");
var $decrease_priority2 = $(".decrease_priority2");

// Sets & Unsets increase_priority1
$(".ranking, .complaint select").change(function() {
        var name = $(this).data("name"); //Gets data-name of ".ranking"    
        //If values are "Too_small" AND "1"  
        if ($(".complaint select").val() === "Too_small" 
            && $(this).val() == 1 && !$(this).data("increase_priority1")) {
                $("<option>", {text:name, val:name}).appendTo($increase_priority1);
                $(this).data("increase_priority1", true); 
        }    
        //If either value changes 
        if ($(this).data("increase_priority1") &&
            ($(this).val() != 1 || $(".complaint select").val() != "Too_small")) {
                $("option[value=" + name + "]", $increase_priority1).remove();
                $(this).removeData("increase_priority1"); //no longer a priority item
        }     
    });
// Sets & Unsets decrease_priority1

// Sets & Unsets increase_priority2
  
// Sets & Unsets decrease_priority2