如何在选择元素中删除大于选择的选项?

时间:2020-05-21 18:13:32

标签: javascript html jquery

jQuery("#vavCount select option").each(function() {
      if ($('#vavCount select ').is(':enabled')) {
        if (jQuery.inArray(jQuery(this).val(), checkBoxIdAndDropdownValue) === -1) {
          $("#vavCount select option").each(function() {
            if ($(this).val()) > (jQuery.inArray(jQuery(this).val())) {
              jQuery(this).remove();
            }
          })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one" id="vavCount">
  <select name="" disabled="disabled" id="VAV_CountCheck" style="margin-left: 18px;width: 84px;">
    <option value="1025">5</option>
    <option value="1035">15</option>
    <option value="1040">20</option>
    <option value="1045">25</option>
  </select>

1 个答案:

答案 0 :(得分:0)

没有太多描述,因此这里有三个示例可以满足您的目标。第一个假设您从其他来源(也许是另一个表单字段)获取比较值。选择示例后,第二个示例选择框将修剪其自身的值。第三个使用在数组中找到的值。

// First example uses an arbitrary value for the comparison

var checkBoxIdAndDropdownValue = 1039;

// Test to see if the select box is enabled first
if ($('#vavCount select').is(':enabled')) {
  // Loop once for each option
  $("#vavCount select option").each(function() {
    // If option value is greater, remove it from dropdown
    if ($(this).val() > checkBoxIdAndDropdownValue) {
      $(this).remove();
    }
  })
}


// Second example if you meant that you want to use
// the selected value of the dropdown to trim the options

var currentValue;

// When an item is selected
$('#vavCount2 select').change(function() {
  currentValue = $('#vavCount2 select').val();
  // Loop once for each option
  $("#vavCount2 select option").each(function() {
    // If the chosen option value is greater, remove it from dropdown
    if ($(this).val() > currentValue) {
      $(this).remove();
    }
  })
});


// Third example (!) if you are testing for a value in an array to trim the options

var matchingVal;
var valueArray = [1020, 1035, 1040, 2000];

// Test to see if the select box is enabled first
if ($('#vavCount3 select').is(':enabled')) {
  // Loop once for each option
  $("#vavCount3 select option").each(function() {
    // convert to an integer (only needed if array uses integers)
    var optionVal = parseInt($(this).val(), 10);
    if (!matchingVal && valueArray.includes(optionVal)) {
      matchingVal = optionVal;
    }

    // If the matching value is greater, remove it from dropdown
    if (matchingVal && optionVal > matchingVal) {
      $(this).remove();
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Example 1</h3>
<div class="one" id="vavCount">
  <select id="VAV_CountCheck" style="margin-left: 18px;width: 84px;">
    <option value="1025">5</option>
    <option value="1035">15</option>
    <option value="1040">20</option>
    <option value="1045">25</option>
  </select>
</div>

<h3>Example 2</h3>
<div class="one" id="vavCount2">
  <select id="VAV_CountCheck" style="margin-left: 18px;width: 84px;">
    <option value="1025">5</option>
    <option value="1035">15</option>
    <option value="1040">20</option>
    <option value="1045">25</option>
  </select>
</div>

<h3>Example 3</h3>
<div class="one" id="vavCount3">
  <select id="VAV_CountCheck" style="margin-left: 18px;width: 84px;">
    <option value="1025">5</option>
    <option value="1035">15</option>
    <option value="1040">20</option>
    <option value="1045">25</option>
  </select>
</div>

相关问题