启用所有选择选项直到 selectedIndex

Question

问候代码杂耍者！

我正在处理一个令人沮丧的问题，我似乎无法 100% 解决这个问题。

我有一个包含各种动态选项数量的选择字段（可能有多个“中间”，例如“中间 1”、“中间 2”）通过 php 停用并获取和构建。用户必须输入一个数字来激活和预选特定的选择选项。到目前为止，它可以根据用户输入预先选择选项。但我希望它启用 every 选择选项高于预选。

$(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>

AJAX 的返回值是选项值之一，因为我的代码需要使用它们而不是整数，如 1、2 或 3(+)。

例如： 我有相同的选择字段，但 ID 号为 3 的成员位于位置目标。所以应该启用“goal”、“middle”和“start”。如果成员编号 3 位于中间位置，我希望 only "start" 和 "middle" 启用。

有什么帮助吗？

真诚地， 蒙特利尔

编辑

因为误解：忽略AJAX。它只是将值作为成员的位置返回，因为选项值是这样定义的 --> ID 为 1 的 EG 成员位于“中间”位置，因此选项值 =“中间”以及所有 之前 (option value="start") 应该启用。

我只想根据返回值选择选项减去选项总数中的 selectIndex 来启用每个选项。

示例： 3个选项 返回值为“中间”，因此 selectIndex 1 应启用带有 selectIndex 0 和 1 的选择选项

Answer 1

我认为您正在寻找类似的东西：

$('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>