Enable all Select Options up to selectedIndex - php

Question

Greeting fellow code-jugglers!
I am dealing with a kinda frustrating problem, which it seems I can't solve to 100% I want it to work.
I've got a select field with various dynamic options amount (could be more than one "middle", e. g. "middle 1", "middle 2") 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 every select option above the pre-selection.
$(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 = <? echo $event_id; ?>;
var posit_id = <? echo $posit_id; ?>;
// 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);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="inputX" id="inputX" required="required" />
<select name="selectX" id="selectX" required="required">
<option selected="selected">Awaiting Input</option>
<option disabled="disabled" value="Start">Start</option>
<option disabled="disabled" value="Middle">Middle</option>
<option disabled="disabled" value="Last">Last</option>
</select>
</form>
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(+).
For example:
I've got the same select field but the member with id number 3 is at position goal. So "goal", "middle", and "start" should be enabled. If member number 3 is at position middle, I want only "start" and "middle" to be enabled.
Any help?
Sincerely,
montreal
EDIT
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 before (option value="start") should be enabled.
I just want to enable every option based on the selectIndex from the returned value selected option minus total amount of options.
Example:
3 options
returned value is "middle", hence selectIndex 1
select option with selectIndex 0 and 1 should be enabled

Answer 1

I think you are looking for something like:
$('select#test')
//set new value on select
.val('4')
// enable all children
.children().prop('disabled', false)
// starting at selected option, disable all after it
.filter(':selected').nextAll().prop('disabled', true)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test" size="10">
<option value="1">item 1</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="5">item 5</option>
<option value="6">item 6</option>
<option value="7">item 7</option>
<option value="8">item 8</option>
<option value="9">item 9</option>
<option value="10">item 10</option>
</select>