在索引之后或之前禁用下拉列表中的元素

Question

您好，我有两个要求禁用所选索引前后下拉列表中的所有元素。

$(document).ready(function() {
  $('#test option:not(:selected)').attr('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tests" id="test">
  <option value="1846">test</option>
  <option value="1962">test2</option>
  <option value="1846">test3</option>
  <option value="1962">test4</option>
  <option value="1846" selected>test5</option>
  <option value="1962">test6</option>
  <option value="1846">test7</option>
  <option value="1962">test8</option>
  <option value="1846">test9</option>
  <option value="1962">test10</option>
  <option value="1846">test11</option>
  <option value="1962">test12</option>
</select>

截至目前，我能够禁用所有未选中但不确定如何根据所选索引放置过滤器的元素。

Answer 1

你可以这样做：

$('#test option').each(function(index,value) {
    if(index > 2) {
        $(this).attr('disabled', true);
    }
});

Answer 2

试试这个

$(document).ready(function() {
  $("select").change(function() {
    $('#test option:not(:selected)').attr('disabled', "disabled");
    $('#test option[selected]').attr('disabled', false);
  });

  $("#resetData").click(function() {
    $('#test option[disabled=disabled]').attr('disabled', false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tests" id="test">
  <option value="1846">test</option>
  <option value="1962">test2</option>
  <option value="1846">test3</option>
  <option value="1962">test4</option>
  <option value="1846">test5</option>
  <option value="1962">test6</option>
  <option value="1846">test7</option>
  <option value="1962">test8</option>
  <option value="1846">test9</option>
  <option value="1962">test10</option>
  <option value="1846">test11</option>
  <option value="1962">test12</option>
</select>
<button id="resetData">Enable All</button>

Answer 3

尝试使用普通兄弟select或select

之后的兄弟

$('#test option:selected ~ option')

要 select selected 选项之前的选项，您可能必须使用类似

的选项

$('#test option:selected').prevAll()

Answer 4

一种方法如下：

$(document).ready(function() {

  // bind the anonymous function of the on() method
  // as the event-handler for the change event:
  $('#test').on('change', function () {

    // retrieving the newly-selected <option> element's
    // selectedIndex property:
    var selectedIndex = this.selectedIndex;

    // converting the HTMLOptionsCollection (the <option>
    // children of the <select> element) into a jQuery
    // collection and using the filter() method:        
    $(this.options).filter(function(i){

      // returning any option whose index is not equal to
      // the selectedIndex:
      return i != selectedIndex;

    // using the prop() method to set the disabled property
    // of the retained elements to true:
    }).prop('disabled', true);
  });
});

请注意，在上面，您可以将特定索引传递给函数，而不是使用 <select> 元素的 this.selectedIndex 属性。

$(document).ready(function() {
  $('#test').on('change', function () {
    var selectedIndex = this.selectedIndex;
    
    $(this.options).filter(function(i){
      return i != selectedIndex;
    }).prop('disabled', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tests" id="test">
  <option value="1846">test</option>
  <option value="1962">test2</option>
  <option value="1846">test3</option>
  <option value="1962">test4</option>
  <option value="1846" selected>test5</option>
  <option value="1962">test6</option>
  <option value="1846">test7</option>
  <option value="1962">test8</option>
  <option value="1846">test9</option>
  <option value="1962">test10</option>
  <option value="1846">test11</option>
  <option value="1962">test12</option>
</select>
<button id="resetData">Reset</button>

或者：

$(document).ready(function() {
  $('#test').on('change', function() {

    // again: storing the index of the element:
    var selected = this.selectedIndex;

    // using the prop() method's anonymous function,
    // passing in the i argument (the index of the
    // current <option> in the collection:
    $(this.options).prop('disabled', function(i) {

      // if i is equal to the selected index we return
      // false (not-true), otherwise we return true
      // (not-false) to set the disabled property of
      // the current <option>:
      return !( i === selected);
    });
  });
});

$(document).ready(function() {
  $('#test').on('change', function() {
    
    var selected = this.selectedIndex;
    
    $(this.options).prop('disabled', function(i) {
      return !( i === selected);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tests" id="test">
  <option value="1846">test</option>
  <option value="1962">test2</option>
  <option value="1846">test3</option>
  <option value="1962">test4</option>
  <option value="1846" selected>test5</option>
  <option value="1962">test6</option>
  <option value="1846">test7</option>
  <option value="1962">test8</option>
  <option value="1846">test9</option>
  <option value="1962">test10</option>
  <option value="1846">test11</option>
  <option value="1962">test12</option>
</select>
<button id="resetData">Reset</button>

或者，更简洁一点——尽管在这次迭代中没有使用 index 属性：

$(document).ready(function() {
  $('#test').on('change', function () {

    // using only the prop() method and its anonymous function:
    $(this.options).prop('disabled', function(){
      // this sets the disabled property of each element
      // according to the inverse of its selected property,
      // if the element is selected we return false, if
      // it's not selected we return true:
      return !this.selected;
    });
  });
});

$(document).ready(function() {
  $('#test').on('change', function() {
    $(this.options).prop('disabled', function() {
      return !this.selected;
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tests" id="test">
  <option value="1846">test</option>
  <option value="1962">test2</option>
  <option value="1846">test3</option>
  <option value="1962">test4</option>
  <option value="1846" selected>test5</option>
  <option value="1962">test6</option>
  <option value="1846">test7</option>
  <option value="1962">test8</option>
  <option value="1846">test9</option>
  <option value="1962">test10</option>
  <option value="1846">test11</option>
  <option value="1962">test12</option>
</select>
<button id="resetData">Reset</button>

根据您问题的第一行，上述所有方法都将禁用所选 <option> 以外的所有 <option> 元素；然而，这似乎不是你想要的，我会为你提供最后的选择：

$(document).ready(function() {
  $('#test').on('change', function() {
    // retrieving all the <options>:
    $(this.options)
      // finding the <option> at the same index as the
      // selected index:
      .eq(this.selectedIndex)
      // retrieving all the subsequent sibling elements:
      .nextAll()
      // updating their 'disabled' property to true:
      .prop('disabled', true);
  });
});

$(document).ready(function() {
  $('#test').on('change', function() {
    $(this.options).eq(this.selectedIndex).nextAll().prop('disabled', true);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="tests" id="test">
  <option value="1846">test</option>
  <option value="1962">test2</option>
  <option value="1846">test3</option>
  <option value="1962">test4</option>
  <option value="1846" selected>test5</option>
  <option value="1962">test6</option>
  <option value="1846">test7</option>
  <option value="1962">test8</option>
  <option value="1846">test9</option>
  <option value="1962">test10</option>
  <option value="1846">test11</option>
  <option value="1962">test12</option>
</select>
<button id="resetData">Reset</button>

Answer 5

试试这个

$(document).ready(function() {
    $("select").change(function() {
        $('#test option').not(':selected').prop('disabled', true);
    });
});

在索引之后或之前禁用下拉列表中的元素

Disable elements in dropdown after or before an index

javascript

jquery

html

drop-down-menu

html-select