Option variables handling with jQuery in select change function

Question

I tried to write some jQuery functions to change some variables values when options of a select item are selected (add a certain value if option is selected, subtract that value if option is not selected anymore), but it adds and subtracts values in a very odd way. Here's the code I wrote for the javascript (adapted from a previous code that used to work with checkboxes):

var pds1=0;
var pds2=0;
var pds3=0;
var pdstot=0;

$(document).ready(function() {
  $('#perk1').html(pds1);
  $('#perk2').html(pds2);
  $('#perk3').html(pds3);
  $('#perktot').html(pdstot);

  $("#blabla").change(
    function() {
      if ($("option#5:selected").length)
      {
        pds1=pds1+10;
        pdstot=pdstot+10;
      }
      else if(pds1>0)
      {
        pds1=pds1-10;
        pdstot=pdstot-10;
      }

      if ($("option#3:selected").length)
      {
        pds2=pds2+10;
        pdstot=pdstot+10;
      }
      else if(pds2>0)
      {
        pds2=pds2-10;
        pdstot=pdstot-10;
      }

      if ($("option#4:selected").length)
      {
        pds3=pds3+10;
        pdstot=pdstot+10;
      }
      else if(pds3>0)
      {
        pds3=pds3-10;
        pdstot=pdstot-10;
      }
      //option 6 adds 10 to variable pds1 and pds2
      if ($("option#6:selected").length)
      {
        pds1=pds1+10;
        pds2=pds2+10;
        pdstot=pdstot+10;
      }
      else if(pds1>0)
      {
        pds1=pds1-10;
        pds2=pds2-10;
        pdstot=pdstot+10;
      }

      $('#perk1').html(pds1);
      $('#perk2').html(pds2);
      $('#perk3').html(pds3);
      $('#perktot').html(pdstot);
    });
});

and here's the html

<select id='blabla' multiple='multiple'>
<option id='5'>Name5</option>
<option id='3'>Name3</option>
<option id='4'>Name4</option>
<option id='6'>Name6</option>
</select>

<span id="perk1"></span>
<span id="perk2"></span>
<span id="perk3"></span>
<span id="perk4"></span>

Can someone explain me how this function is handling variables? Odd behavior example: clicking option 5 doesn't add 10 to pds1, but instead it subtracts 10 to pds2; what I'd like to happen instead it's to add 10 to pds1 and do nothing to pds2. I think the problem, in this case, it's in the "else if" under "option#6:selected", but why? And it's not the only odd behavior.

sorry, my mistake pasting and editing the code: they have id! i edited the question. — She Hulk
– She Hulk, Commented Oct 7, 2012 at 20:59

charlietfl · Accepted Answer · 2012-10-07 23:00:01Z

It's easy to see why you get the results you are getting. Using current code and the #5 example walk through each of the if statements. Since #5 is selected pds1 gets 10 added. Since #6 isn't selected and pds1 got increased by #5 the else subtracts what was just added to pds1.

You can simplify this whole logic by simply resetting the variables to zero each time, and then only adding what is needed.

/* utilty function to avoid repeated lines */
function showValues(pds1, pds2, pds3) {

    var pdstot = pds1 + pds2 + pds3
    $('#perk1').html(pds1);
    $('#perk2').html(pds2);
    $('#perk3').html(pds3);
    $('#perk4').html(pdstot);
}

$(document).ready(function() {
    showValues(0, 0, 0);

    $("#blabla").change(

    function() {
        var num_selected = $(this).find(':selected').length;

        var pds1 = 0;
        var pds2 = 0;
        var pds3 = 0;                     

        if ($("option#5:selected").length) {
            pds1 = pds1 + 10;
        }    
        if ($("option#3:selected").length) {
            pds2 = pds2 + 10;
        }    

        if ($("option#4:selected").length) {
            pds3 = pds3 + 10;
        }

        //option 6 adds 10 to variable pds1 and pds2
        if ($("option#6:selected").length) {
            pds1 = pds1 + 10;
            pds2 = pds2 + 10;    
        }

        showValues(pds1, pds2, pds3);

    });
});

DEMO: http://jsfiddle.net/f9UEC/

Collectives™ on Stack Overflow

Option variables handling with jQuery in select change function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related