检查数组中的值是否与选择框的值相同?

时间:2017-10-03 14:22:34

标签: javascript jquery html arrays

是否可以检查内部值与选择框的数组和值之间是否匹配?我需要检查选择框的值是否在数组中,如果是,我可以将其类更改为其他类。 noobie在这里

修改

我一直在努力重新创建我的问题,以便更容易理解。 在这个小提琴here上,您可以看到我使用按钮动态创建新的选择框!在每个按钮中,选择被禁用,但仅适用于该框。我想要做的是,如果选择了一个值,则在所有其他框中将停用所有其他值。 我尝试在数组中插入所选值的所有值,然后比较它们以禁用它们,但我只设法在每个框中执行此操作。此外,选择框中的数据来自数据库!  任何提示?

//这应该禁用所选选项

$('#sig_3').on('change', '.c_service_c', function() {
  var value = $('#type').val();
  var selected_array = [];

  $('.c_service_c option:selected').each(function() {
    if ($(this).val() != "") { //$(this).val()!="" --> remove the check on 'Please Select' option
      selected_array.push($(this).val()); //save selected values so that they can be disabled later
    }
  });

  console.log('print: ' + selected_array);
  //reset all values to 'Y' before changing selected to 'N'
  $('.c_service_c option').each(function() {
    if ($(this).val() != "") { //$(this).val()!="" --> remove the check on 'Please Select' option
      $('.c_service_c option').addClass('Y'); //resetting all options to 'Y'
    }
  });

  if (selected_array.indexOf($('.c_service_c').val()) > -1) {
    $('.c_service_c option:selected').removeClass('Y');
    $('.c_service_c option:selected').addClass('N');
    console.log('it prints here too');
  }

  //disable all selected values in options array
  if (selected_array.indexOf($(this).val()) > -1) {
    $('.c_service_c option:selected').removeClass('Y');
    $('.c_service_c option:selected').addClass('N');
    console.log('it prints');
  }

  //disable all selected values
  $('.c_service_c option').each(function() {
    if ($(this).val() != "") { //$(this).val()!="" --> remove the check on 'Please Select' option
      if ($(this).hasClass('N')) {
        $(this).attr("disabled", true);
        $(this).removeClass('N');
      } else {
        $(this).addClass('Y');
        $(this).attr("disabled", false);
      }
    }
  });
});

2 个答案:

答案 0 :(得分:1)

如果您希望每个options检查一个数组中是否存在option,并根据是否禁用它,您只需要使用{options循环.each() {1}}功能并进行检查。

这应该是你的代码:

$("#dropdown option").each(function() {
  if (arr.indexOf($(this).val()) > -1) {
    $(this).attr('disabled', true);
  }
});

var arr = ["apple", "tomato", "peach", "pineapple"];


$("#dropdown option").each(function() {
  if (arr.indexOf($(this).val()) > -1) {
    $(this).attr('disabled', true);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<select id="dropdown">
  <option value="apple">Apples</option>
  <option value="orange">Oranges</option>
  <option value="pineapple">Pineapple</option>
  <option value="lemon">Lemon</option>
</select>

修改

updated your fiddle 所以它现在正在运行,您的问题是您在selected_array的本地范围内声明$().each()它需要声明为全局。

答案 1 :(得分:0)

假设您正在使用jQuery,并假设我正确理解您的要求,请尝试以下操作:

//available values
var arr = ["apple", "tomato", "peach", "pineapple"];

$("#select-dropdown").on("change", function() {
  //store value on local variable
  var value = $(this).val();

  //search the value inside the array, return -1 if can't find
  var index = arr.indexOf(value);

  if (index != -1) {
    //found value in array, add the new class!
    $(this).addClass("my-new-class");
  } else {
    //didnt found anything, remove class
    $(this).removeClass("my-new-class");
  }
});
.my-new-class{
  background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select-dropdown">
  <option value="apple">Apples</option>
  <option value="orange">Oranges</option>
  <option value="pineapple">Pineapple</option>
</select>