title: JavaScript - Update pricing with select box change
body: <p>So... I am trying to update a price at the top of a comparison table when you select the price options from thee select box.</p>
  
  <p>The select box is hidden and is controlled by two +/- buttons on either side.</p>
  
  <p>I want to take the value of the select box and cross reference it with the amount in the durationOptions array and increase/decrease the total bubble at the top.</p>
  
  <p>Here is my ugly attempt but I'm stuck, the figures are all over the place and I am sure I am doing this the long way. There must be something simpler.</p>
  
  <p>Here is my fiddle:
  <a href="http://jsfiddle.net/xt2qLzmk/1/" rel="nofollow">http://jsfiddle.net/xt2qLzmk/1/</a></p>
  
  <p>Code:</p>
  
  <pre><code>var customFlag = 0;
  
  
  $(".select-plus").click(function (event) {
  
      customFlag = 0;
  
      var durationOptions = new Array();
      durationOptions[18] = 95; (select option value 18 = £95 etc...)
      durationOptions[4] = 125;
      durationOptions[30] = 165;
      durationOptions[20] = 195;
  
      The random indexes are actually their values in the DB but will build that array from the DB later, made a static one for quick prototyping.
  
  
      var isLastElementSelected = $('#customise-rightmove_zoopla_700_sites &gt; option:selected').index() == $('#customise-rightmove_zoopla_700_sites &gt; option').length - 1;
  
      if (!isLastElementSelected) {
          $('#customise-rightmove_zoopla_700_sites &gt; option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
  
          // Update label with current select value
          var currentVal = $('#customise-rightmove_zoopla_700_sites &gt; option:selected').attr('label'),
              labelId = 'customise-rightmove_zoopla_700_sites_label';
  
          var bubblePrice = $('#customise-bubble-display-price').text(),
              optionValue = $('#customise-rightmove_zoopla_700_sites &gt; option:selected').val(),
              oldOptionValue = $('#customise-rightmove_zoopla_700_sites &gt; option:selected').prev('option').val();
  
          var labelAmount = parseFloat(durationOptions[optionValue]),
  
              oldLabelAmount = parseFloat(durationOptions[oldOptionValue]);
  
          if (oldLabelAmount == 95) {
              oldLabelAmount = 0;
          }
  
          var newPrice = (parseInt(bubblePrice) - parseFloat(oldLabelAmount)) + parseFloat(labelAmount);
          $('#customise-bubble-display-price').text(newPrice);
  
  
          $('#' + labelId).text(currentVal);
      }
  
  
  });
  
  var customFlag
  
   $(".select-minus").click(function (event) {
      customFlag = 0;
  
      var durationOptions = new Array();
      durationOptions[18] = 95;
      durationOptions[4] = 125;
      durationOptions[30] = 165;
      durationOptions[20] = 195;
  
  
      var isLastElementSelected = $('#customise-rightmove_zoopla_700_sites &gt; option:selected').index() == $('#customise-rightmove_zoopla_700_sites &gt; option:first-child').index();
  
      if (!isLastElementSelected) {
          $('#customise-rightmove_zoopla_700_sites &gt; option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
  
          // Update label with current select value
          var currentVal = $('#customise-rightmove_zoopla_700_sites &gt; option:selected').attr('label'),
              labelId = 'customise-rightmove_zoopla_700_sites_label';
  
          var bubblePrice = $('#customise-bubble-display-price').text(),
              optionValue = $('#customise-rightmove_zoopla_700_sites &gt; option:selected').val(),
              oldOptionValue = $('#customise-rightmove_zoopla_700_sites &gt; option:selected').next('option').val();
  
          var labelAmount = parseFloat(durationOptions[oldOptionValue]),
  
              oldLabelAmount = parseFloat(durationOptions[optionValue]);
  
          if (durationOptions[optionValue] == 95) {
              return;
          }
  
          var newPrice = (parseInt(bubblePrice) - parseFloat(oldLabelAmount)) + parseFloat(labelAmount);
          $('#customise-bubble-display-price').text(newPrice);
  
  
          $('#' + labelId).text(currentVal);
      }
  });
  </code></pre>
  
  <p>The select box is the right move monthly options select with the +/- buttons and it should update the pricing bubble directly above.</p>
  
  <p><strong>Extra info</strong>
  When the "+" button is clicked it should cycle to next select option, take it's value and cross reference the actually currency value in the durationOptions array then add that currency value to the value in the bubble at the top and when the "-" is clicked it should decrease the bubble amount at the top by the currency value in the durationOptions array for that select value.</p>
  
  <p>NB: One of the problems is that it's difficult putting another attribute on the select options as it is dynamically built in Zend 1.12 and there is no method to give each options a custom attribute :(</p>
  
  <p>I don't have screens of it increasing/decreasing but you should get the idea from the fiddle.</p>
  
  <p><strong>UPDATE:
  Not the pretiest but I have re-factored and the incrementing works well but how do I do it in reverse?</strong></p>
  
  <p><a href="http://jsfiddle.net/xt2qLzmk/2/" rel="nofollow">http://jsfiddle.net/xt2qLzmk/2/</a></p>
  
  <p>Any help would be greatly appreciated :)</p>
  
  <p>Nathan</p>