title: Dynamic form Javascript dropdown/input
body: <p>I am using a plugin for my crowdfunding plateform which is working fine and is helping me a lot as I am not quite confortable with coding yet.</p>
  
  <p>However I'd like to tweak a JavaScript function. When a customer chooses how much he wants to contribute, the customer can either decide the amount or the reward level he wants</p>
  
  <p>Here is basically how the form is made:</p>
  
  <pre><code>&lt;form action="" method="POST"&gt;
  &lt;div class="form-row inline left twothird"&gt;
      &lt;label for="level_select"&gt;Contribution Level
          &lt;span class="dropdown "&gt;
              &lt;select name="level_select" class="dropdown__select"&gt;
                  &lt;option value="1" data-price="5.00"&gt;Reward 1&lt;/option&gt;
                  &lt;option value="1" data-price="15.00"&gt;Reward 2&lt;/option&gt;
                  &lt;option value="1" data-price="25.00"&gt;Reward 3&lt;/option&gt;
          &lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="form-row inline third total"&gt;
      &lt;label for="total"&gt;Total&lt;/label&gt;
      &lt;input type="text" class="total" name="total" id="total" value=""&gt;
  &lt;/div&gt;
  &lt;div class="form-row submit"&gt;
      &lt;input type="submit"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>From there I want to bind levels with the amount entered by the user.
  Currently, it is partially working as changing the amount depending on the selected level is pretty easy. Where I'm stuck is with changing the selected option depending on the input.</p>
  
  <p>In the plugin I found the following lines which seems to be what I'm interested in:</p>
  
  <pre><code>    jQuery(document).bind('price_change', function(event, price) {
      jQuery('input[name="total"]').val(price);
      var levelIndex = jQuery('select[name="level_select"]').prop('selectedIndex');
      var levelPrice = jQuery('select[name="level_select"] option').eq(levelIndex).data('price');
      if (price &lt; levelPrice) {
          jQuery('input[name="total"]').val(levelPrice);
      }
  });
  </code></pre>
  
  <p>Based on this I started to tweak it a bit but with my fairly low knowledge of jQuery here is where I am at the moment:</p>
  
  <pre><code>jQuery(document).ready(function() {
  jQuery(document).bind('price_change', function(event, price) {
      var price = jQuery('input.total').val();
      var levelIndex = jQuery('select[name="level_select"]').prop('selectedIndex');
      var levelPrice = jQuery('select[name="level_select"] option').eq(levelIndex).data('price');
      var nextLevel = jQuery('select[name="level_select"] option').eq(levelIndex + 1);//got to check if exist, else NULL
      if (nextLevel){var nextLevelPrice = jQuery('select[name="level_select"] option').eq(levelIndex + 1).data('price');}
      var prevLevel = jQuery('select[name="level_select"] option').eq(levelIndex - 1);//got to check if exist, else NULL
      if (prevLevel){var prevLevelPrice = jQuery('select[name="level_select"] option').eq(levelIndex - 1).data('price');}
      while (prevLevel!=NULL &amp;&amp; price &lt; levelPrice) {
          jQuery('input[name="total"]').val(prevLevel);
      }
      while (nextLevel != NULL &amp;&amp; price &lt; nextLevelPrice){
          jQuery('input[name="total"]').val(nextLevel);
      }
  });
  </code></pre>
  
  <p>Am I on the right track or is their an easier way to proceed?</p>
  
  <p>Thank you for your attention, any advice appreciated</p>