title: Enable all Select Options up to selectedIndex
body: <p>Greeting fellow code-jugglers!</p>
  
  <p>I am dealing with a kinda frustrating problem, which it seems I can't solve to 100% I want it to work.</p>
  
  <p>I've got a select field with various <strong>dynamic options amount</strong> (<em>could be more than one "middle", e. g. "middle 1", "middle 2"</em>) deactivated and fetched and build by php. The user has to input a number to activate and pre-select the specific select option. So far it works to the point, it pre-selects the option based on the user input. But I want it to enable <strong>every</strong> select option <strong>above</strong> the pre-selection.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      // PRE-SELECT TPOS BASED ON TMEMBER
      $('#inputX').change(function() {
          var member_id = $('#inputX').val();
          // FETCHED BY PHP, NO NEED TO OVERRIDE (WORKS)
   var event_id = &lt;? echo $event_id; ?&gt;;
   var posit_id = &lt;? echo $posit_id; ?&gt;;
      
          // FETCH CURRENT POSITION, MEMBER IS AT
   $.ajax({
              type: 'POST',
              url: 'fetch_pos.php',
              data: {
                     posit_id: posit_id,
                     event_id: event_id,
                     member_id: member_id
                    },
              // GET SELECT OPTION WITH POSITION VALUE MEMBER IS AT [E. G. "START"]
              success: function(html){
                  // ENABLE SELECT OPTION
                  $("#selectX option[value='" + html + "']").attr("disabled", false);
                  // ADD SELECTED ATTRIBUTE
                  $("#selectX").val(html).setAttribute("selected", "selected");
      
                  // DISABLE EVERY OPTION PAST THE RETURNED VALUE AND
                  // ENABLE EVERY "PREVIOUS" OPTION
                  $('select#selectX').val(html).children().attr("disabled", false).filter(':selected').nextAll().prop('disabled', true);
              }
          }); 
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form&gt;
      &lt;input type="text" name="inputX" id="inputX" required="required" /&gt;
      &lt;select name="selectX" id="selectX" required="required"&gt;
          &lt;option selected="selected"&gt;Awaiting Input&lt;/option&gt;
          &lt;option disabled="disabled" value="Start"&gt;Start&lt;/option&gt;
          &lt;option disabled="disabled" value="Middle"&gt;Middle&lt;/option&gt;
          &lt;option disabled="disabled" value="Last"&gt;Last&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>The returned value of AJAX is one of the option values, since my code needs them to be worked with and not integers as 1, 2 or 3(+).</strong></p>
  
  <p><strong>For example:</strong>
  I've got the same select field but the member with id number 3 is at position goal. So "<em>goal</em>", "<em>middle</em>", and "<em>start</em>" should be enabled. If member number 3 is at position middle, I want <strong>only</strong> "<em>start</em>" and "<em>middle</em>" to be enabled.</p>
  
  <p>Any help?</p>
  
  <p>Sincerely,
  montreal</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Because of misunderstanding: ignore the AJAX. It just returns the value as position of the member, because the option value is defined as such --> E. G. Member with ID 1 is at position "middle", hence option value="middle" and everything <strong>before</strong> (option value="start") should be enabled.</p>
  
  <p>I just want to enable every option based on the selectIndex from the returned value selected option minus total amount of options.</p>
  
  <p>Example:
  3 options
  returned value is "middle", hence selectIndex 1
  select option with selectIndex 0 and 1 should be enabled</p>