onChange

onChange

by Jen Malcolm

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<select onChange="update(this)" data-sorted-values="" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

<div id="box0">...</div>
<div id="box1">default value = </div>
<div id="box2">user-ordered value = </div>
<div id="box3">qty = 0</div>

JavaScript

function update(menu) {
	var last_action = '';
    var qty			= 0;

	// nothing selected
    if ($(menu).val() == null) 
    {
        $.each($(menu).find('option'), function(i) 
        {
        	qty = 0;
        	last_action = "nothing selected";
            $(this).removeAttr('selected');
            $(menu).attr('data-sorted-values', '');
        });
    } 
    // at least 1 item selected
    else 
    {
        $.each($(menu).find('option'), function(i) 
        {
            var vals = $(menu).val().join(' ');
            var opt = $(this).text();
            qty = $(menu).val().length;

            if (vals.indexOf(opt) > -1) 
            {
                // most recent selection
                if ($(this).attr('selected') != 'selected') 
                {
                    last_action = "added: " + opt;
                    $(menu).attr('data-sorted-values', $(menu).attr('data-sorted-values') + $(this).text() + ' ');
                    $(this).attr('selected', 'selected');
                }
            } 
            else 
            {
                // most recent deletion
                if ($(this).attr('selected') == 'selected') 
                {
                    last_action = "removed: " + opt;
                    var string = $(menu).attr('data-sorted-values').replace(new RegExp(opt, 'g'), '');
                    $(menu).attr('data-sorted-values', string);
                    $(this).removeAttr('selected');
                }
            }
        });
    }
    
    $('#box0').html(last_action);
    $('#box1').html("default value = " + $(menu).val());
    $('#box2').html("user-ordered value = " + $(menu).attr('data-sorted-values'));
    $('#box3').html("qty = " + qty);
}